$(function(){



  $('.gallery').each(function() {



    var $gal     = $(this),

        $movable = $(.movable, $gal), 

        $slides  = $(>*, $movable),

        N        = $slides.length,

        C        = 0,

        itv      = null;

    

    function play() { itv = setInterval(anim, 3000); }

    function stop() { clearInterval(itv); }

    function anim() {

      C = ($(this).is(.prev) ? --C : ++C) <0 ? N-1 : C%N;

      $movable.css({transform: translateX(-+ (C*100) +%)});

    }

    

    $(.prev, .next, this).on(click, anim);

    $gal.hover(stop, play);

    play();



  });



});

.gallery{

  position: relative;

  overflow: hidden;

}

.gallery .movable{

  display: flex;

  height: 70vh;

  transition: transform 0.4s;

}

.gallery .movable > div {

  flex:1;

  min-width:100%;

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



Pause on hover and autoslide



<div class=gallery>

  <div class=movable>

    <div style=background:#0af>1 <p style=position:absolute; top:400px;>aaaa</p></div>

    <div style=background:#af9>2</div>

    <div style=background:#f0a>3</div>

  </div>

  <button class=prev>Prev</button>

  <button class=next>Next</button>

</div>



As many galleries as you want