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>

Vertical Slick carousal not showing last slider completely in responsive devices

I have an issue with vertical slick slider in responsive. I am not able to see last slider completely, it showing half slider on some devices, like iphone5,6,7.. etc.
jQuery('.slick-carousel').slick({
vertical: true,
verticalSwiping: true,
slidesToShow: 2,
slidesToScroll: 1,
infinite: false,
customDots: false,
centerMode: false,
dots: false,
centerPadding: '0px',
responsive: [{
breakpoint: 481,
settings: {
customDots: true
}
}]
});
I want to show complete slider on scroll in responsive.

Slick Slider - custom arrows - remove slick-hidden and re-enable functionality

I have a slick slider which is limited to 4 slides and have this set so these are always visible in a grid. I'm using focusOnSelect to have one of the slides active and you can click through the other 3 to make it active.
This slider then syncs with another panel where text is shown through each slide. All is working fine with that setup.
However, I also need arrows (or custom text in this case) as nav (previous/next), to also cycle through the slides, but as 4 slides are displayed on screen - from a total of 4 slides in total - the arrows have a class of 'slick-hidden' by default and even if I force them to display with CSS, they are still stripped of functionality and do nothing.
Is there a way to force them to be visible and keep next/previous functionality? Is it just with the class or some other functionality preventing them from working?
Here's my settings:
$('.slick-whoweare').slick({
arrows: true,
dots: false,
centerMode: true,
autoplay: false,
infinite: false,
slidesToShow: 4,
slidesToScroll: 1,
speed: 500,
variableWidth: false,
focusOnSelect: true,
nextArrow: '.wwanext',
prevArrow: '.wwaprev',
asNavFor: '.slider-wwanav'
});
In the front-end source, its output like this (arrows are recognised, just disabled):
<div class="wwa-nav">
<div class="wwaprev slick-arrow slick-hidden" tabindex="-1" aria-disabled="false">Previous</div>
<div class="wwanext slick-arrow slick-hidden" tabindex="-1" aria-disabled="false">Next</div>
</div>
After research, I also found another approach of setting 'arrows: false', then using my own code, but this doesn't work either:
$('.wwaprev').click(function(){
$('.slick-whoweare').slick('slickPrev');
})
$('.wwanext').click(function(){
$('.slick-whoweare').slick('slickNext');
})
Any help/guidance would be appreciated.

I managed to solve this myself.
I added the arrows onto the 2nd synced slider, rather than the main one:
$('.slider-nav').slick({
arrows: true,
dots: false,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
fade: true,
swipe: true,
asNavFor: '.slick-whoweare',
nextArrow: '.wwanext',
prevArrow: '.wwaprev'
});
then the settings for the main slider just as standard:
$('.slick-whoweare').slick({
arrows: true,
dots: false,
centerMode: true,
centerPadding: 0,
autoplay: false,
infinite: false,
slidesToShow: 4,
slidesToScroll: 1,
speed: 500,
variableWidth: false,
focusOnSelect: true,
asNavFor: '.slider-nav'
});
However, this messes up the main slider as it now behaves with a transform animation (sliding right, when there are no more slides) - it didn't without these new settings. As as I want them fixed in place in the grid, I just added some CSS to prevent that on the slick list and force it to not move:
.slick-whoweare .slick-track, .slick-whowearer .slick-list {
-webkit-transform: translate3d(0, 0, 0) !important;
-o-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
And it worked. Now have custom arrows working with 2 synced sliders.

Document is scrolled to the slick carousel on window resize at responsive breakpoints

I've got the following slick initialization code. Basically these are two synced blocks:
the first is the content carousel showing only one block at a time.
the second is a menu carousel showing several options at a time.
this.slick1 = $('.slider-content1').slick({
arrows: false,
asNavFor: '.carousel-menu1',
adaptiveHeight: true,
fade: true,
speed: 1100
});
this.slick2 = $('.carousel-menu1').slick({
arrows: false,
asNavFor: '.slider-content1',
centerMode: true,
slidesToShow: 5,
speed: 1100,
responsive: [
{
breakpoint: 1001,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 751,
settings: {
slidesToShow: 2
}
}
]
});
The problem is that the document is scrolled to slick2 when window is resized over the responsive breakpoint.
What may cause it? I definetely do not want the document to be scrolled each time I resize the window.