JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<div class="gallery-slider ">
       <div class="images-preview">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
           <img alt="" class="img-responsive" src="http://placehold.it/300">
       </div>
       <div class="controls">
           <div class="right-arrow"><i class="fa fa-angle-left fa-3x"></i></div>
           <div class="left-arrow"><i class="fa fa-angle-right fa-3x"></i></div>
       </div>
   </div>

CSS

.gallery-slider {
    position: relative;
}

.gallery-slider .images-preview {
    margin: auto;
    height: 230px;
    overflow: hidden;
}

.gallery-slider .images-preview img {
    display: inline-block;
    overflow: visible;
    width: 410px;
    margin: 10px 17px;
}
.gallery-slider .images-preview img, .controls {
        height: 200px;
    width: 26%;
}
/* Controls */
.controls {
    position: absolute;
    top: 10px;
    width: 100%;
}


.right-arrow, .left-arrow {
    display: inline-block;

    padding: 62px;
    background-color: rgba(255, 255, 255, 0.76);
    position: absolute;
    height: 100%;
    cursor: pointer;
}
.right-arrow i, .left-arrow i{
        margin: 23px 20px;
}
.left-arrow {
    right: 0px;
}

.right-arrow {
    left: 0px;
    text-align: right;
}

JavaScript

$(".left-arrow").click(function () { 
      var leftPos = $('.images-preview').scrollLeft();
      $(".images-preview").animate({scrollLeft: leftPos - 100}, 1000);
    });

    $(".right-arrow").click(function () { 
      var leftPos = $('.images-preview').scrollLeft();
      $(".images-preview").animate({scrollLeft: leftPos + 100}, 1000);
    });