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.
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 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
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?
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>
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.