JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<div class="slider">
<div class="slide">
<img src="http://placehold.it/350x150">
xxx
</div>
<div class="slide">
<img src="http://placehold.it/350x150">
zzz
</div>
<div class="slide">
<img src="http://placehold.it/350x150">
www
</div>
</div>

<div class="slider-nav">
<button class="arrow-prev" type="button">
Prev
</button>
<button class="arrow-next" type="button">
Next
</button>
</div>

JavaScript

var $slider = $( '.slider' );

var $arrowPrev = $( '.arrow-prev' );
var $arrowNext = $( '.arrow-next' );

$slider.slick({
    'nextArrow'     : $arrowNext,
    'prevArrow'     : $arrowPrev
});

$slider.on( 'afterChange', function(event, slick) {
    var $activeSlide = $slider.find( '.slick-active' );

    var $prevSlide = $activeSlide.prev( '.slick-slide' );
    var $nextSlide = $activeSlide.next( '.slick-slide' );

    console.log( '$prevSlide', $prevSlide );
    console.log( '$nextSlide', $nextSlide );

    $arrowPrev.html( $prevSlide.text() );
    $arrowNext.html( $nextSlide.text() );
});