JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stripe" class="tech-slideshow">
    <div id="moving-stripe" id="tech-slideshow-1"></div>
</div>

CSS

.tech-slideshow, .tech-slideshowReverse {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.tech-slideshow > div , .tech-slideshowReverse > div {
    height: 200px;
    width: 2526px;
    background: url(http://cl.ly/9BJG/collage.jpg);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    
    -moz-transition:  opacity 0.5s ease-out; 
       -o-transition: opacity 0.5s ease-out; 
  -webkit-transition: opacity 0.5s ease-out; 
      -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow 60s linear infinite;
    -moz-animation:    moveSlideshow 60s linear infinite;
    
}
.tech-slideshowReverse > div {

    -webkit-animation: moveSlideshowReverse 60s linear infinite;
    -moz-animation:    moveSlideshowReverse 60s linear infinite;
    
}

@-webkit-keyframes moveSlideshow {
    0% { left: 0px; }
    100% { left: -1684px; }
}
@-moz-keyframes moveSlideshow {
    0% { left: 0px; }
    100% { left: -1684px; }
}
@keyframes moveSlideshow {
    0% { left: 0px; }
    100% { left: -1684px; }
}

@-webkit-keyframes moveSlideshowReverse {
    0% { left: -1684px; }
    100% { left: 0px; }
}
@-moz-keyframes moveSlideshowReverse{
    0% { left: -1684px; }
    100% { left: 0px; }
}
@keyframes moveSlideshowReverse {
    0% { left: -1684px; }
    100% { left: 0px; }
}

JavaScript

$("#stripe").on("swipe",function(){
  // $(this).hide();
    
    if($("#stripe").hasClass("tech-slideshowReverse"))
    {
    $(this).removeClass('tech-slideshowReverse').addClass('tech-slideshow');
    }
    else
    {
    $(this).removeClass('tech-slideshow').addClass('tech-slideshowReverse');     
    }
});