Question

35

Custom next button for slick slider

rated 0 times [ 39] [ 4] / answers: 1 / hits: 16980 / 8 Years ago, thu, september 15, 2016, 12:00:00

I have on the page, there are two identical sliders, but they may be more. I need to make a custom button Next for each of sliders. I try to do so:

HTML

<div class=slider-wrap>

    <div class=slider>

        <div class=slider-item>Slide 1</div>

        <div class=slider-item>Slide 2</div>

        <div class=slider-item>Slide 3</div>

    </div>

    <button id=next>Next ></button>

</div>



<div class=slider-wrap>

    <div class=slider>

        <div class=slider-item>Slide 1</div>

        <div class=slider-item>Slide 2</div>

        <div class=slider-item>Slide 3</div>

    </div>

    <button id=next>Next ></button>

</div>

jQuery

$('.slider').slick({

    dots: true,

    nextArrow: $('#next')

});

Demo: http://codepen.io/fabric/pen/bwprxJ

Update:
Second demo: http://codepen.io/fabric/pen/KgzZVz

If I click on the next button of the first slide, then the slide is changed of the second. And if the second, then nothing works. How to fix it?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malaysias

Add To Favorites

Follow

Total Points: 619

Total Questions: 110

Total Answers: 107

Location: Czech Republic

Member since Thu, Aug 11, 2022

2 Years ago

answered 8 Years ago chase · Accepted Answer

Add unique ids+ class to each slider & navigation

$('.slider').slick({

  dots: true,

  nextArrow: $('#next')

});

$('.slider2').slick({

  dots: true,

  nextArrow: $('#next2')

});

http://codepen.io/anon/pen/QKNxNj

for your second example you change the navigation id to a class

$('.slider').slick({

  dots: true

});



$('.next').click(function(){

  $(this).prev().slick('slickNext');

});

http://codepen.io/anon/pen/vXGAxb