JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="slider-container">
    <div class="slides-container">
        <div class="slide-item one">slide 1</div>
        <div class="slide-item two">slide 2</div>
        <div class="slide-item three">slide 3</div>
        <div class="slide-item four">slide 4</div>
    </div>
</div>

<div class="indicators">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

<span class="prev">PREV</span>
<span class="next">NEXT</span>

CSS

.slider-container {
    border: 1px solid;
    width: 300px;
    height: 150px;
    overflow: hidden;
}

.slides-container {
    position: relative;
    width: 1500px;
}

.slide-item {
    width: 300px;
    height: 100px;
    background-color: #ccc;
    float: left;
}

.one {
    background-color: #f00;
}

.two {
    background-color: #0f0;
}

.three {
    background-color: #00f;
}

JavaScript

var $slidesContainer = $(".slides-container");
var $slideItems = $(".slide-item");
var slideWidth = $slideItems.width();
var slidesTotal = $slideItems.length;
var slideIndex = 0;

$(".next").on("click", function(e){
    var $this = $(this);
    slideIndex += 1;
    
    if(slideIndex >= slidesTotal){
        slideIndex = 0;
        $slidesContainer.animate({
            left: 0
        }, 500);
    } else {
        $slidesContainer.animate({
            left: -slideWidth * slideIndex
        }, 500);
    }
});

$(".prev").on("click", function(e){
    var $this = $(this);
    slideIndex -= 1;
    
    if(slideIndex < 0){
        slideIndex = slidesTotal - 1;
        $slidesContainer.animate({
            left: -slideWidth * (slidesTotal - 1)
        }, 500);
    } else {
        $slidesContainer.animate({
            left: -slideWidth * slideIndex
        }, 500);
    }
});


$(".indicators").find("span").on("click", function(e){
    var $this = $(this);
    var clickedIndex = $this.index();
    
    slideIndex = clickedIndex;
    $slidesContainer.animate({
        left: -slideWidth * slideIndex
    }, 500);
});

/*! Hammer.JS - v1.0.5 - 2013-04-07
 * http://eightmedia.github.com/hammer.js
 *
 * Copyright (c) 2013 Jorik Tangelder <[email protected]>;
 * Licensed under the MIT license */

(function(t,e){"use strict";function n(){if(!i.READY){i.event.determineEventTypes();for(var t in i.gestures)i.gestures.hasOwnProperty(t)&&i.detection.register(i.gestures[t]);i.event.onTouch(i.DOCUMENT,i.EVENT_MOVE,i.detection.detect),i.event.onTouch(i.DOCUMENT,i.EVENT_END,i.detection.detect),i.READY=!0}}var i=function(t,e){return new i.Instance(t,e||{})};i.defaults={stop_browser_behavior:{userSelect:"none",touchAction:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},i.HAS_POINTEREVENTS=navigator.pointerEnabled||navigator.msPointerEnabled,i.HAS_TOUCHEVENTS="ontouchstart"in...