Hello my dear community,
I'm working on a site with multiple sliders on one site. I use slick.js
Problem ist that the slidesToShow is depending on the number of slider items.
Maximum slidesToShow should be 6
if the number of slides is smaller then 6:
-> slidesToShow should be the number of slider items
I tried this:
$('.carousel').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: $(this).querySelectorAll( '.item:not(.slick-cloned)' ).length > 4 ? 6 : 2,
slidesToScroll: 1,
});
Got console error that querySelectorAll is not a function. Also $(this) is the document not the slider in that context.
Also I tried to iterate through the sliders and tried to initializing them one by one but it also does not work
var imgcarousels = document.getElementsByClassName('vaunet-carousel ');
Array.prototype.forEach.call(imgcarousels, function(carousel, index) {
console.log(carousel);
carousel.slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 991,
settings: {
dots: true,
arrows: false,
slidesToShow: 1
}
}
]
});
});
Error: carousel.slick is not a function
Any Idea how to make the slidesToShow depending on the slides?
Thanks a ton <3
Regards
Timo
Related
Let's suppose slick slider pagination has 25 pages (it might be possible on mobile devices)
Is it possible to set up a slick slider to show pagination like shown below?
Pagination block: < 1 ... 2 3 4 ... 25 >
Update: what I mean is to hide some pages and show these dots instead
try this
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
</section>
<span class="pagingInfo"></span>
$(".slider").slick({
autoplay: true,
dots: true,
customPaging: function (slider, i) {
var thumb = $(slider.$slides[i]).data();
return `<a>${i}</a>`;
},
responsive: [
{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2,
},
},
],
});
I am trying to use one slider code for two sliders using same class name. I have created this codepen to illustrate the problem.
Problems:
Both sliders are not behaving same, means they have different sliding pattern. I have changed the color current active slide to show how both sliders are different.
One of the slider works fine ( till some slides) but other one totally off as you can see, in terms of container height, highlight pattern, etc.
Both of them have chopped content on top or bottom, even though there is no centerMode enabled. The behaviour I was expecting is to current slide to slide on the top and not show the preview of gone slide (top) and next (bottom)
Second slider changes its height randomly. I don't know why
I have tried one solution which didn't work either and it is there as commented code in the codepen.
$(".feature-container").each(function () {
console.log(this.id);
let elm_primary = $("#" + this.id)
.find(".feature-slider")
.get(0);
$(elm_primary).slick({
slidesToShow: 5,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
arrows: false,
infinite: true,
responsive: [
{
breakpoint: 700,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
dots: false,
arrows: true
}
}
]
});
});
I am building a carousel using Slick, and I've got some responsive breakpoints set as seen here:
var slidesNumber = $('.aslide').length;
var options = {
rows: (slidesNumber > 3 ? 2 : 1),
slidesPerRow: 3,
slidesToShow: (slidesNumber > 3 ? 1 : 3),
slidesToScroll: 1,
dots: true,
arrows: false,
dotsClass: 'slick-dots slick-dots-black',
adaptiveHeight: true,
responsive: [
{
breakpoint: 1280,
settings: {
slidesPerRow: 2,
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
}
},
{
breakpoint: 768,
settings: {
slidesPerRow: 1,
slidesToShow: 1,
slidesToScroll: 1,
rows: 1,
}
}
]
}
$('.slider').slick(options);
however, Slick ignores the 768px breakpoint completely and display 2 rows of 2 slides each instead of 1 row 1 slide. Here is a JSFiddle.
I've looked here and here.
The mobileFirst setting makes Slick ignore even the 1280px breakpoint.
I've looked at other posts as well but found no solution yet.
EDIT 1:
Also, noticed in the JSFiddle, if you load the page with window width less than 768px it shows 3 slides in 2 rows but if you resize up and down it starts showing 2 slides in 2 rows again.
I am using Slick Carousel on a site I am developing.
An issue I am facing is attempting to get the "slider-nav" to move in the opposite direction to the standard.
Example:-
Currently the order is as follow:-
1 2 3 4 5 6
I need it to run as the following:-
6 5 4 3 2 1
I know I could just reverse the order I am pushing then in but I need the following to happen:-
6 5 4 3 2 1
1 6 5 4 3 2
2 1 6 5 4 3
etc...
I have attempted to set the "slidesToScroll" as a -1 (as I have seen ) but this just causes my page to crash even on fiddle.
My current code look like:-
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
autoplay: true,
centerMode: false,
});
$('.slider-nav').slick({
slidesToShow: 5,
infinite: true,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: false,
focusOnSelect: true,
});
Basic setup:-
https://jsfiddle.net/5cyqtvt6/9/
I have also attempted to use the rtl settings but this for some reason just starts to show empty slides.
Eg.
https://jsfiddle.net/5cyqtvt6/14/
Any help would be greatly appreciated.
I managed to fix the issue by adding
<div class="slider-for" dir="rtl">
and
<div class="slider-nav" dir="rtl">
and also updating the jQuery to the following:-
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
autoplay: true,
centerMode: false,
rtl: true
});
$('.slider-nav').slick({
slidesToShow: 5,
infinite: false,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true,
rtl: true
});
Working jsFiddle:-
https://jsfiddle.net/5cyqtvt6/16/
I am using jQuery Slick Slider to create a left-aligned, infinite, variable-width slider. Here is the JSFiddle: http://jsfiddle.net/mtaube/rLkj3wcn/2/
The basic initialization and settings, using the default theme:
$('.js-slick').slick({
dots: true,
variableWidth: true,
arrows: true,
});
Here is the begginning of the slider, which appears as desired:
The problem is that when you reach the last slide there is a bunch of whitespace before the new slides pop in:
Is there a way to avoid this? I need to remove the temporary white space flashing. Thanks in advance.
Add infinite: false
It will solve the white space issue as well as slider cloning issue.
You have use these options:
infinite: false,
slidesToShow: 3
Answering my own question... apparently this is a known bug with the jQuery Slick Slider.
There are some bug reports on GitHub, here is the most relevant one for anyone trying to subscribe to the issue: https://github.com/kenwheeler/slick/issues/1207
There are apparently some hacks posted in that GitHub report, but it didn't work well for me as it broke the 'dots' setting. I will update this answer if the bug is eventually solved. Thanks anyway.
This happens to me when i have 2 items per row. If you know the number of items that can be shown without scroll then you can set up a variable - in my case i could get 6 items on the screen without the need for a scroll
var infiniteScroll = true
if (noOfItems < 7)
{
infiniteScroll = false
}
$('.variable-width2').slick({
dots:true,
infinite: infiniteScroll,
draggable: true,
pauseOnHover: true,
swipeToSlide: true,
adaptiveHeight: false,
centerMode: false,
variableWidth: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 2,
initialSlide: 1,
rows: 2,
responsive: [
{
breakpoint: 1023,
settings: {
infinite: infiniteScroll,
draggable: true,
pauseOnHover: true,
swipeToSlide: true,
adaptiveHeight: false,
centerMode: false,
variableWidth: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 2
}
},
{
breakpoint: 600,
// settings: "unslick"
settings: {
infinite: infiniteScroll,
draggable: true,
pauseOnHover: true,
swipeToSlide: true,
adaptiveHeight: false,
centerMode: false,
variableWidth: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 2
}
}]
});