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