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

Display none div shows white spaces in slick slider

I have two problems in the slider. I need to hide and show images based on selection of color selection by client i.e if user select red color all corresponding red images would if white than all corresponding white images would show based on selection.
Now the first problem is in the above image in the slider white space shows of the display none elements even if the red selections show
Thumbnail slider also shows white spaces and the position of the thumbnail also changes.
Here are the javascripts of slick slider
function slideProductDetail() {
$('.js_prod_main').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dot: false,
fade: false,
infinite: false,
asNavFor: '.js_prod_sub'
});
$('.js_prod_sub').slick({
slidesToShow: 5,
slidesToScroll: 1,
//asNavFor: '.js_prod_main',
dots: false,
arrows: false,
infinite: false,
vertical: true,
verticalSwiping: true,
focusOnSelect: true,
responsive: [
{
breakpoint: 1200,
settings: {
vertical: true,
infinite: false,
}
},
{
breakpoint: 768,
settings: {
vertical: true,
infinite: false,
}
},
{
breakpoint: 575,
settings: {
vertical: false,
infinite: false,
}
}
]
});
}
I have all images set of images(both white and red images) in shopify if the user select color red set of red colour images would show in slider and white then only white colour. The images of display none div shows white empty spaces

The width of react-slick slide does not change when I resize the browser

I create a testimonial slide by react-slick.
My code is:
const settings = {
dots: true,
adaptiveHeight: true,
swipeToSlide: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoPlay: true,
className: 'sample'
};
Everything works fine. However, when I resize my browser, the width of slide does not change. I check in my console.log, the width of slick-track is always 9900px. I think the width should be changed when I resize my browser.
Could anyone help me to solve this? I think I have a problem with re-render element when resizing browser in reactjs :(.
Thanks

If your goal is to change react-slick options when you resize the browser, use responsive option.
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
responsive: [
{
breakpoint: 1024, // width to change options
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
}
]
}
https://react-slick.neostack.com/docs/example/responsive/

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.

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