We Keep Coding

slickNext not working in center mode slick slider

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.

Slick JS vertical with two elements in same line

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

Slick slider change speed after change

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.

Cloning extra slides for Slick Slider

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
}
}]
});

jQuery Slick Slider: How to make a logo ticker slider

I'm currently using the Slick Slider plugin and don't really want to add another plugin to achieve a Logo Ticker slide effect like seen here bxSlider. Any idea how to do it with Slick or if it's even possible?

Set autoplaySpeed to 0 and cssEase to 'linear' to achieve that effect.
$(function() {
$('.your-class').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
speed: 1000,
cssEase:'linear'
});
});
Example here: https://jsfiddle.net/ugtdjrjt/

There is an autoplay option at Slick Slider
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
Is that maybe already everything you want?