CODEWITHSUNDEEP
javascriptsliderslick.js
Phil Owen
Phil Owen

Reputation: 87

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.

Upvotes: 0

Views: 4682

Answers (1)

Phil Owen
Phil Owen

Reputation: 87

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.

Upvotes: 0

Related Questions