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/
Related
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
I am having a situation where on clicking on first slide of slider, i need the carousel to move to next slide.
Below is the code which i am using to create a slider
var $myanimSlider = $('.animslider').slick({
dots: true,
arrows: true,
slidesToShow: 3.6,
slidesToScroll: 1,
vertical: false,
autoplay: false,
autoplaySpeed: 2500,
infinite: false,
focusOnSelect: true,
touchMove: true,
speed: 500,
centerMode: true,
centerPadding: '0',
cssEase: 'linear',
prevArrow: '<div class="animslick_nav prev-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
nextArrow: '<div class="animslick_nav next-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
appendDots: $('.animDots'),
responsive: [
{ breakpoint: 767,
settings: {
arrows: true,
dots: true,
slidesToShow: 1
}
}
]
}).slickAnimation();
and i was trying to use the slickNext on click of first slide so that it may move to second slide.
$('#slick-slide00').click(function() {
$myanimSlider.slick("slickNext");
});
slick-slide00 is the id of first slide but the above code is not working.
Can someone help me understand what is the issue and there is no errors in the console also.
I've a problem with Slick. I need to display two elements in a same line with a vertically animation. It's working fine with the horizontally display.
$(".slide").slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
pauseOnHover: true,
autoplay: false,
dots: false,
arrows: false,
vertical: true
});
My complete code : https://jsfiddle.net/pzvov8og/
Do you have any idea ?
Thank you !
you have to write: slidesToScroll: 2, because you want display two elements
$(".slide").slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 2,
pauseOnHover: true,
autoplay: false,
dots: false,
arrows: false,
vertical: true
});
set infinite: false, you set slides to show: 2 , and its trying to show 4 slide for infinite scroll
I am using slick carousel in one of my projects & have added the configuration to display the next and prev button.
I am trying to tweak the default behavior of the next and prev button in such a way that clicking them just scrolls from left to right but the currently selected slide will remain the same. I am not able to tweak this default behavior and clicking the next and prev button is changing the selected slide as well. Has anyone tried the same?
$('.product-slider').slick({
dots: true,
infinite: false,
speed: 700,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
dots: true
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: false,
dots: true
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
dots: true
}
}
]
});
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
}
}]
});