title: Slider animations
body: <p>I have a question. How can make this slider, to move in loop and how can make this move backwards, after reaching last slide, in the same speed it's moves forward?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  
      var width = '100vw';
      var speed = 1500;
      var pause = 3000;
      var current = 1;
  
      var $slider = $('.slider');
      var $slides = $slider.find('.slides');
      var $slide = $slides.find('.slide');
  
      var leftAnnime =  '-='+width;
      
      setInterval(function(){
          
          $slides.animate({'margin-left': leftAnnime }, speed, function(){
              current++;
              if( current == $slide.length ) {
                leftAnnime = 0;
                current = 0;
              } else {
                leftAnnime = '-='+width;
              }
          });
      }, pause);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
      width: 100%;
      height:auto;
      text-align: center;
      overflow: hidden;
    }
    .slides {
      display: flex;
      overflow-x: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      /*
      scroll-snap-points-x: repeat(300px);
      scroll-snap-type: mandatory;
      */
    }
    .slides::-webkit-scrollbar {
      width: 1px;
      height: 10px;
    }
    .slides::-webkit-scrollbar-thumb {
      background: #bbb;
    }
    .slides::-webkit-scrollbar-track {
      background: transparent;
    }
    .slides &gt; div {
      scroll-snap-align: start;
      flex-shrink: 0;
      width: 100vw;
      height: 100vh;
      background: #eee;
      transform-origin: center center;
      transform: scale(1);
      transition: transform 0.5s;
      position: relative; 
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
    }
    .slides &gt; div:target {
    /*   transform: scale(0.8); */
    }
    .author-info {
      background: rgba(0, 0, 0, 0.75);
      color: white;
      padding: 0.75rem;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin: 0;
    }
    .author-info a {
      color: white;
    }
    img {
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .slider &gt; a {
      display: inline-flex;
      width: 1.5rem;
      height: 1.5rem;
      background: white;
      text-decoration: none;
      align-items: center;
      justify-content: center;
      margin: 0 0 0.5rem 0;
      position: relative;
      border:1px solid green;
    }
    .slider &gt; a:active {
      top: 1px;
    }
    .slider &gt; a:focus {
      background: #666;
    }
    /* Don't need button navigation */
    @supports (scroll-snap-type) {
      .slider &gt; a {
        display: none;
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="slider"&gt;  
    &lt;div class="slides"&gt;
      &lt;div id="slide-1" class="slide"&gt;Slide 1&lt;/div&gt;
      &lt;div id="slide-2" class="slide"&gt;Slide 2&lt;/div&gt;
      &lt;div id="slide-3" class="slide"&gt;Slide 3&lt;/div&gt;
      &lt;div id="slide-4" class="slide"&gt;Slide 4&lt;/div&gt;
      &lt;div id="slide-5" class="slide"&gt;Slide 5&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>