JSFiddle - React, Tailwind, and code Playground

by Tim Ko

HTML

<span style="display:block">Instead of previous/next, we could use triangles pointing left and right</span>
<input type="button" class="goLeft" value="PREVIOUS"/>
<input type="dropdown" class="dropdown" value="Dropdown goes here"/>
<input type="button" class="goRight" value="NEXT"/>
<div class="wrapper">
    <div class="slide">
        <div id="slide1">Text 1 goes here</div>
        <div id="slide2">Text 2 goes here</div>
        <div id="slide3">Text 3 goes here</div>
    </div>
</div>
<div class='nextposn'>0</div>

CSS

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    left: 0px;
    height: 300px;
    border: 1px solid black;
}

.slide {
    position: absolute;
    top: 0px;
    width: 400%;
    background-color: black;
    -moz-transition: left 0.3s, -moz-transform 2s;
    -webkit-transition: left 0.3s, -webkit-transform 2s;
    -o-transition:width left 0.3s, -o-transform 2s;
    transition: left 0.3s, transform 2s;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.slide div {
    position: relative;
    float: left;
    top: 0px;
    width: 25%;
    height: 300px;
}

#slide1 {
    background-color: blue;
}

#slide2 {
    background-color: yellow;
}

#slide3 {
    background-color: green;
}

JavaScript

var slide = 0;
var numSlides = 3;
var slideWidth = -1 * parseInt($('.slide div').width());

$('.goLeft').on('click', function() {
    nextSlide();
});

$('.goRight').on('click', function() {
    previousSlide();
});

$('.wrapper').swipeLeft(function() {
    previousSlide();    
});

$('.wrapper').swipeRight(function() {
    nextSlide();
});

function previousSlide() {
    setTimeout(function() {
        slide += (numSlides+1);
        var nextPosition = slide % numSlides;
        $('.nextposn').html(nextPosition);
        $('.slide').css('left', slideWidth * nextPosition);
    }, 301);
};

function nextSlide() {
        setTimeout(function() {
        slide += (numSlides-1);
        var nextPosition = slide % numSlides;
        $('.nextposn').html(nextPosition);
        $('.slide').css('left', slideWidth * nextPosition);
    }, 301);

}