JSFiddle - React, Tailwind, and code Playground

by frank_o

HTML

<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test</p>
    </div>
    <div class="option">
        <p>Test</p>
    </div>
</div>

CSS

.effect {
    margin: 5px 0;
    height: 70px;
    width: 320px;
    text-align: center;
}
.option {
    border: 1px solid grey;
}

JavaScript

$('.test').each(function () {
    var option = $(this).find('.option'),
        prev_next = $(this).find('.prev_next');

    $(this).slick({
        slide: option,
        appendArrows: prev_next,
        prevArrow: '<a>Previous</a>',
        nextArrow: '<a>Next</a>'
    });
});