Develop Reference

Slick Carousel autoplay video slide1

I have a slick carousel, within the first slide I am autoplaying a video. This is working when the slick starts, shows the 2nd slide then gets back to the 1st. But I cannot get this to work on pageload, I think this is because I am using afterChange. You can see my example here
The JavaScript for firing is:
$('.top-carousel').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
pauseOnHover: false,
infinite: true,
arrows: false,
});
$('.top-carousel').on('afterChange', function(event, slick, currentSlide){
if ($("#slick-slide00").hasClass("slick-active")) {
$('.top-carousel').slick('slickPause');
theVideo.play();
}
});
document.getElementById('theVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$('.top-carousel').slick('slickPlay');
}
Does anyone have any ideas please?

Is there any way to change the directions left to right in Slick carousel ? Default it goes Right to left directions

When I set rtf fasle then the page goes white and when I set slidesToScroll- 1 it also trhoughs same result.
$('.demo').slick({
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
cssEase: 'linear',
accessibility:true,
autoplay:true,
autoplaySpeed: 3000,
});

Add the rtl option when you initialize slick and set it to true. You'll also need to set the attribute "dir" to "rtl" for the HTML tag or the parent of the slider.
$('.demo').slick({
dots: false,
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
cssEase: 'linear',
accessibility:true,
autoplay:true,
autoplaySpeed: 3000,
rtl: true
});

The default for the slideshow is left to right. To enable right to left, you need to set rtl: true and then according to the Slick website:
The HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".
For example:
<div dir="rtl">
<div class="demo">
...
</div>
</div>

angular.js slick carousel showing blank slides

I am using angular.js and making use of the slick carousel. I have about 9 items in the carousel, and have only slightly modified the styles (mainly moving the prev/next buttons around), and I am getting what looks like 4-5 blank slides
Here is my slick config
(coffeescript)
$scope.firstSlickConfig = {
arrows: true
slidesToShow: 5
rows: 1
draggable: false
slidesToScroll: 1
infinite: true
dots: false
variableWidth: true
responsive: [
{
breakpoint: 1450
settings:
slidesToShow: 1
infinite: true
slidesToScroll: 1
slidesPerRow: 1
}
{
breakpoint: 960
settings:
enabled: true
draggable: true
slidesToShow: 3
slidesToScroll: 1
rows: 1
infinite: true
arrows: true
}
{
breakpoint: 786
settings:
enabled: true
draggable: true
slidesToShow: 2
slidesToScroll: 1
rows: 1
infinite: true
arrows: true
}
{
breakpoint: 415
settings:
enabled: true
draggable: true
slidesToShow: 2
slidesToScroll: 1
rows: 1
infinite: true
arrows: true
mobileFirst: true
}
]
}
does anyone know how I can get rid of these 'ghost' slides?

I had similar issues when I was working with the Slick slider not long ago and it can take a bit of fiddling around to get right.
If you have both
infinite: true
variableWidth: true
you may also want to add
centerMode: true
slidesToShow: 1
Which can help the slider recycle. Because you've got "Slides to show = 5" it will keep going to the end till 5 slides are showing. But if some of the slides are different widths AND you have it set as infinite the recycling can be an issue from my experience. Otherwise try turning Infinite off.

I found slick's angular docs (https://github.com/devmark/angular-slick-carousel) and saw an event function I can tie into. I have 9 placeholder elements, so I just put
event:
afterChange: (event, slick, currentSlide, nextSlide) ->
if currentSlide == 8
slick.slickGoTo(1)
return
definitely dirty and wish it handled this better, but it works for now.

Stacking of images when loaded - Slick

We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.
When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.
Below is the code for my Slick Slider
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
and Images looks like as in link here
I have read on various places and found this linkGithub link for same issue
But it is not working for me. I am still getting same ugly effect.
Please suggest

Have you tried delaying the function until the dom is loaded?
$( window ).load(function() {
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
});
or, if that doesn't work:
setTimeout(function(){
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
}, 2000)

Stop autoplay after clicking on dots in slick.js

So, this is code I use for slider:
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
dots: true
});
And I want that after user clicks on any dot, it will disable autoplay. Then I tried this:
$('.autoplay').on('init', function() {
$('.slick-dots').click(function() {
$('.autoplay').slick('autoplay', false);
});
});
But no help. Here is DEMO from jsFiddle. Is this possible with slick.js?

Try this
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
dots: true
});
$('.slick-dots').on('click', function() {
$('.autoplay').slick('slickPause');
});

From one of the issues in the github-forum, I saw that you have to attach init event before initializing with slick.
$('.autoplay').on('init', function(slick) {
$('.slick-dots').on('click',function() {
$('.autoplay').slick('slickPause');
});
}).slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
})
DEMO HERE

You can use
$('.slick').slick('slickPause');
to pause. You can play it again with
$('.slick').slick('slickPlay');