I am having memory issues using the plugin slick.
I created a simple website in using .php files. I have 3 pages and one slider on each of them.
The browser struggles to load the pages after a few interaction with the slider and I get the following error in the console 'Uncaught out of memory'. I am not an expert in javascript nor in memory leaks. If someone could help me understand the problem, I would greatly appreciate it. Thanks.
Here is my main javascript file for the entire website:
// on index.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
// on page2.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
// on page3.php
<div class="slider one">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
//I cannot share the source code for legal reasons but basically this is the html stucture. On the actual project, I use images.
var opt1 = {
dots: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
speed: 300,
variableWidth: true,
arrows: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]'),
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
]
}
var opt2 = {
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 300,
arrows: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]')
}
var opt3 = {
dots: false,
infinite: false,
slidesToShow: 3,
slidesToScroll: 0,
speed: 300,
arrows: false,
centerMode: false,
variableWidth: true,
prevArrow: $('[data-prev="prevButton"]'),
nextArrow: $('[data-next="nextButton"]'),
responsive: [
{
breakpoint: 1197,
settings: {
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
centerMode: false
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 761,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
}
$(document).ready(function(){
var gadgetCarousel = $(".slider");
gadgetCarousel.each(function() {
if ($(this).is(".one")) {
$(this).slick($(opt1));
}
else if ($(this).is(".two")){
$(this).slick($(opt2));
}
else if ($(this).is(".three")){
$(this).slick($(opt3));
}
else {
$(this).slick();
}
})
}
I changed the value of the option 'slidesToScroll' from 0 to 3 and the 3rd slider works fine.
Related
http://stage.proavtoshkoli.ru/saint-petersburg/avtoshkola-distanciya - Its solo item with images
http://stage.proavtoshkoli.ru/search?city=saint-petersburg&category=b - This is multiple items
My slick settings
$('.image-slides-wrapper').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
nextArrow: document.querySelector('.nextBtn'),
prevArrow: document.querySelector('.prevBtn'),
responsive: [{
breakpoint: 1035, settings: {
slidesToShow: 3, slidesToScroll: 1
}
},
{
breakpoint: 900, settings: {
slidesToShow: 2, slidesToScroll: 1
}
},
{
breakpoint: 600, settings: {
slidesToShow: 1, slidesToScroll: 1
}
},]
});`
And HTML
<div class="item-slides">
<div class="image-slides-wrapper">
#foreach($school->getImages() as $image)
<div class="offer__slide">
<img class="slide" src="{{asset("storage/" . $image)}}" alt="">
</div>
#endforeach
</div>
<div class="btn_control">
<button class="nextBtn"></button>
<button class="prevBtn"></button>
</div>
</div>
Try to read documentation but there is no answers((( Need help
I am trying to make a slider that will scroll to the beginning/end when its respective endpoint is reached. But this code below is not going from the last image to the first. But it is going from the first image to last
<div class="glider-contain">
<div class="glider">
<div>your content here 1</div>
<div>your content here 2</div>
<div>your content here 3</div>
<div>your content here 4</div>
</div>
<button aria-label="Previous" class="glider-prev">«</button>
<button aria-label="Next" class="glider-next">»</button>
</div>
<script>
let slider = new Glider(document.querySelector('.glider'), {
slidesToScroll: 1,
slidesToShow: 1,
draggable: true,
scrollLock: true,
rewind: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</script>
In slickslider, I need to show half image of the next slide on the right corner on the first time. If I click on the next arrow, then half image should be displayed on both sides.
Currently, I tried using center mode that gives only 2% of image of next slide and that too only on the right side.
$(document).ready(function(){
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 3,
dots: false,
centerPadding: '30px',
nextArrow: '<div class="nav-arrow slick-next slick-arrow"><i class="icon-rightarrow-lg"></i></div>',
prevArrow: '<button class="nav-arrow slick-prev slick-arrow leftarrow"><i class="icon-leftarrow-md" aria-hidden="true"></i></button>',
focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true,
nextArrow: '<button class="nav-arrow slick-next slick-arrow"><i class="icon-rightarrow-md"></i></button>',
prevArrow: '<button class="nav-arrow slick-prev slick-arrow"><i class="icon-leftarrow-md"></i></button>',
}
},
]
});
if( $('.slick-prev').hasClass("leftarrow")){
var currentSlide = $('.slider-nav').slick('slickCurrentSlide');
$('.slick-prev').toggle(currentSlide != 0);
$('.slider-nav').one('afterChange', function() {
$('.slick-prev').show();
});
}
});
<div class="sec-nav">
<div class="sec-nav-title"><h2 class="shop-category">Shop by Category</h2></div>
<div class="slider slider-nav" id="slick-slider-nav">
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image1.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Bath & Body </span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image2.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Hand </span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image3.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Bath & Body Gift Sets</span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image4.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Home</span></div></div>
<div class="sec-nav-imgwrapper"><img class="sec-nav-image" src="/src/assets/imgs/Image5.png">
<div class="sec-nav-imgcaption"><span class="img-caption">Men's</span></div></div>
</div>
</div>
First slides are working fine. But when i add second slides its now working. I'm changing the className, why its not working? If you help me i will be glad. Thank you
$(document).ready(function() {
$('.sidebar-slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 3,
prevArrow: $('.prev1'),
nextArrow: $('.next1')
});
});
$(document).ready(function() {
$('.sidebar-slick2').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 3,
prevArrow: $('.prev2'),
nextArrow: $('.next2')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="sidebar-slick">
<div> Test </div>
<div> Test </div>
<div> Test </div>
</div>
<div class="sidebar-slick2">
<div> Test </div>
<div> Test </div>
<div> Test </div>
</div>
I have a six images in my slick slider.
On desktop (1200px +) I want to display all images in a row (which works).
At 992px width, I want it to only display 3.
First time using slick slider so I'm unsure if this is the right approach: currently, I have one parent div which is trying to accomplish my goals, but unsure if the correct approach would be to contain two divs:
Div 1 will show all six images in a row and then be hidden at 992px width.
Div 2 will contain the slick slider and be shown at 992px width.
Current approach:
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
infinite: true,
cssEase: 'linear'
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="slick/slick.min.js"></script>
<div class="showcaseRow py-4" align="center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 img__container justify-content-center align-self-center">
<div class="slider">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
</div>
</div>
You can set breakepoints for responsive
$('.center').slick({
slidesToShow: 6,
slidesToScroll: 6,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});