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
}
}]
});
Related
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 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'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
What i want achieve is to change autoplay speed when the first animation will be loaded.
I found that slick has afterChange function but I don't know how to use it.
My code:
$(".home-slider-t").slick({
dots: false,
arrows: true,
infinite: false,
speed: 2500,
slidesToShow: 1,
autoplay: true,
fade: true,
autoplaySpeed: 6000
});
I want to set autoplay speed to 15 000ms after first change. (infinite true)
Please note: If you provide a demo of your problem in jsfiddle help us to help you better because this is a plugin. anyways lets see what options we have:
First initialize the plugin
$(".home-slider-t").slick({
dots: false,
arrows: true,
infinite: false,
speed: 2500,
slidesToShow: 1,
autoplay: true,
fade: true,
autoplaySpeed: 6000,
});
and then use slick plugin events and methods:
$(".home-slider-t").on('afterChange', function(event, slick, currentSlide, nextSlide){
$(".home-slider-t").slick('slickSetOption', 'autoplaySpeed', '15000');
});
p.s: Hope this code help to get idea of using methods and events of this plugin.
i couldn't check the code because you didn't provide any jsfiddle but seems its fine.
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
}
}
]
});