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.

When moving to another page and coming back to the page where slick carousel is present, slick carousel is not working

_high.html.erb:
<div class="col-xl-12">
<div class="default-slick-carousel freelancers-container freelancers-grid-layout">
<%= render partial: '/pages/top_trainers' %>
</div>
</div>
##To reinitialize the carousel when coming back to the carousel page, I have added this:
<script type="text/javascript">
$(document).ready(function(){
$('.default-slick-carousel').not('.slick-initialized').slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1292,
settings: {
dots: true,
arrows: false
}
},
{
breakpoint: 993,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
}
}
]
});
})
</script>
So, when I am on this page, carousel is working fine.But when i am moving to some other page and coming back to the carousel page, carousel sliding is not working

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

Detecting screen size with jQuery and change property

I am using a Slick slider/carousal and displaying six items currently. Now what I want to do is I want the script to detect if the browser has been resized or viewed from a smaller screen (say below 768px) then the number of items displayed should change to 3. This is a perfect replica of the media query function in CSS which detects the screen size for making the website responsive. Just the same thing I want to be performed in my jQuery function but I have never done so. Here is my script:
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).on('ready', function() {
jQuery(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 6,
slidesToScroll: 6
});
});
</script>

The plugin has already way to update the options on different view ports. Please have a look at this. Hope this will help you.
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});

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