JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="slider">
    <div class="item">
        Slide 1</div>
    <div class="item">
        Slide 2</div>
    <div class="item">
        Slide 3</div>
    <div class="item">slide 4</div>
</div>
 <br>

<div id="slider1">
    <div class="item">
        Slide 1</div>
    <div class="item">
        Slide 2</div>
    <div class="item">
        Slide 3</div>
    <div class="item">slide4</div>
</div>
     <div id="slider2">
    <div class="item">
        Slide 1</div>
    <div class="item">
        Slide 2</div>
    <div class="item">
        Slide 3</div>
    <div class="item">slide4</div>
</div>
     <div id="slider3">
    <div class="item">
        Slide 1</div>
    <div class="item">
        Slide 2</div>
    <div class="item">
        Slide 3</div>
    <div class="item">slide4</div>
</div>
<div class="nav">
    <a id="prev2" href="#">Previous</a> <a id="next2" href="#">Next</a>
</div>

CSS

.item
    {
        width: 100px;
        height: 100px;
        background: #ccc;
        color: red;
        font-size: 25px;
    }
    .carosel-item
    {
        width: 340px;
    }
    .item1
    {
        float: left;
        border: 1px solid #333;
        width: 100px;
        height: 50px;
        background: #ccc;
        color: red;
        font-size: 25px;
    }

JavaScript

$('#slider').cycle({
        fx: 'scrollLeft',
        prev: '#prev2',
        next: '#next2',
        timeout: 2
    });

    $('#slider1').cycle({
        fx: 'scrollRight',
        prev: '#prev2',
        next: '#next2',
        timeout: 2
    });
$('#slider2').cycle({
        fx: 'scrollLeft',
        prev: '#prev2',
        next: '#next2',
        timeout: 2
    });

    $('#slider3').cycle({
        fx: 'scrollRight',
        prev: '#prev2',
        next: '#next2',
        timeout: 2
    });