Develop Reference

vertical slick slider navigation offset

I have created a slick slider navigation that has an offset of one slide so that it does not repeat the same image as the main slider.
When I click the next arrow on the main slider it does not change the navigations active slide to the next available slide. However, it changes the active slide on the main slider. The navigations slide will only then change on the second click.
JavaScript for the navigation and main slider
jQuery('.slick-slider.vans-gallery').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
lightbox: true,
asNavFor: '.vans-gallery-nav'
});
jQuery('.slick-slider.vans-gallery-nav').slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.vans-gallery',
dots: false,
arrows: false,
vertical: true,
centerMode: false,
initialSlide: 1,
focusOnSelect: true,
});
Page that the slider has been implemented on
https://snapstaging.co.uk/coolkitnew/vans/maxus-edeliver9-l3h2-lwb-fwd-fully-electric-18-freezer-van-88-55kwh-battery-90kw-motor-ulez-caz-zez-charge-exempt-single-charge-point-connection/
Please would someone be able to advise how I can make the navigations slider move to the next slide on the first click. Thanks in advance.

I think the problem is, that the main image has a data-slick-index="0", but the first visible image in the nav has a data-slick-index="1". Therefor you should show the same image in the nav (which has the same data-slick-index) - maybe it can be done with initialSlide: 0 for the jQuery('.slick-slider.vans-gallery-nav').slick(...)};
jQuery('.slick-slider.vans-gallery-nav').slick({
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.vans-gallery',
dots: false,
arrows: false,
vertical: true,
centerMode: false,
initialSlide: 0, //set this to 0
focusOnSelect: true,
});

Slick Slider speeding up after mouse click on image

When clicking on an image within the Slick Slider all slides are moved forward with high speed. How to get rid of that behaviour?
My JS settings:
$(document).ready(function(){
$('.sh_product_slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dots: true,
centerMode: false,
variableWidth: true,
infinite: true,
focusOnSelect: true,
cssEase: 'linear',
touchMove: false,
prevArrow:'<button class="slick-prev"> < </button>',
nextArrow:'<button class="slick-next"> > </button>',
responsive: [
{
breakpoint: 600,
settings: {
centerMode: false,
variableWidth: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
pauseOnHover: false,
pauseOnFocus: false,
arrows:false
}
},
]
});
});

Im not sure but seems work according to your sample
just override the css class
.sh_product_slider2 .slick-slide:after {
position: relative;
}
let me know if not works,
thanks

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?

slick.js How to make it visible for carousel thumbnail videos without hiding in mobile device

I can able to show 3 thumbnail carousel videos in desktop but I wanted to show all video thumbnails only in mobile device (I mean to show all carousel thumbnail videos), please help me out.
videoCarousel: function() {
$(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
initialSlide: 0,
arrows: false,
fade: !0,
asNavFor: ".slider-nav"
});
$(".slider-nav").slick({
slidesToShow: 3,
infinite: false,
slidesToScroll: 1,
swipeToSlide: true,
asNavFor: ".slider-for",
vertical: true,
arrows: false,
dots: false,
centerMode: false,
swipeToSlide: true,
focusOnSelect: true,
draggable: false,
responsive: [
{ breakpoint: 767 }
]
});
}

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');