JSFiddle - React, Tailwind, and code Playground

by Oscar Peña

HTML

<!-- start of slider -->
<article class="slider">
    <img id="1" src="http://totallycoolpix.com/wp-content/uploads/2011/22062011_beautiful_landscapes/earth_002.jpg" alt="custom backsplach; countertop" />
    <img id="2" src="http://totallycoolpix.com/wp-content/uploads/2011/22062011_beautiful_landscapes/earth_004.jpg" alt="kitchen, green Granite counter top" />
</article>
<!-- end of slider -->

CSS

.slider {
    margin: 10px 0;
    max-width: 262px;
    /* Update to your slider width */
    width: 99.86%;
    height: 167px;
    /* Update to your slider height */
    position: relative;
    overflow: hidden;
}
.slider img {
    display: none;
    width: 100%;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

JavaScript

jQuery(function ($) {

    // settings
    var $slider = $('.slider'); // class or id of carousel slider
    var $slide = 'img'; // could also use 'img' if you're not using a ul
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 4300; // 4 seconds
    var $interval;

    function slides() {
        return $slider.find($slide);
    }

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    function startloop(){
    $interval = setInterval(

    function () {
        var $i = $slider.find($slide + '.active').index();

        slides().eq($i).removeClass('active');
        slides().eq($i).fadeOut($transition_time);

        if (slides().length == $i + 1) $i = -1; // loop to start

        slides().eq($i + 1).fadeIn($transition_time);
        slides().eq($i + 1).addClass('active');
    }, $transition_time + $time_between_slides);
}
    function pauseLoop() {
        window.clearInterval($interval);
    }

    $(".slider").hover(

    function () {
        //alert("pause");
        pauseLoop(); // pause the loop
    },

    function () {
        //alert("unpause");
          startloop(); //scroll()
    });
        
    $slide.addEventListener('touchstart', function(e){
	alert ('paused');
  	e.preventDefault()
 	}, false);
	
	$slide.addEventListener('touchend', function(e){
	alert ('paused');
	startloop(); 
    e.preventDefault()
   }, false)
 
    return startloop();
});