title: Slider Slide is not repeating
body: <p>Slider Slide is not repeating.</p>
  
  <p>I'm trying to do that. The slider works fine, but when the last slide comes there's an end, no repeat.</p>
  
  <p><img src="https://i.stack.imgur.com/1OZxY.png" alt=""></p>
  
  <p>And here's my code in a snippet (the snippet's window may be too little, so take a look here: <a href="https://codepen.io/km_likhon/pen/eEroNK" rel="nofollow noreferrer">https://codepen.io/km_likhon/pen/eEroNK</a>):</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>var Slider = (function() {
      var initSlider = function() {
          var dir = $("html").attr("dir");
          var swipeHandler = new Hammer(document.getElementById("slider"));
          swipeHandler.on('swipeleft', function(e) {
              if (dir == "rtl")
                  $(".arrow-left").trigger("click");
              else
                  $(".arrow-right").trigger("click");
          });
  
          swipeHandler.on('swiperight', function(e) {
              if (dir == "rtl")
                  $(".arrow-right").trigger("click");
              else
                  $(".arrow-left").trigger("click");
          });
  
          $(".arrow-right , .arrow-left").click(function(event) {
              var nextActiveSlide = $(".slide.active").next();
  
              if ($(this).hasClass("arrow-left"))
                  nextActiveSlide = $(".slide.active").prev();
  
              if (nextActiveSlide.length &gt; 0) {
                  var nextActiveIndex = nextActiveSlide.index();
                  $(".dots span").removeClass("active");
                  $($(".dots").children()[nextActiveIndex]).addClass("active");
  
                  updateSlides(nextActiveSlide);
              }
          });
  
          $(".dots span").click(function(event) {
              var slideIndex = $(this).index();
              var nextActiveSlide = $($(".slider").children()[slideIndex]);
              $(".dots span").removeClass("active");
              $(this).addClass("active");
  
              updateSlides(nextActiveSlide);
          });
  
          var updateSlides = function(nextActiveSlide) {
              var nextActiveSlideIndex = $(nextActiveSlide).index();
  
              $(".slide").removeClass("prev-1");
              $(".slide").removeClass("next-1");
              $(".slide").removeClass("active");
              $(".slide").removeClass("prev-2");
              $(".slide").removeClass("next-2");
  
              nextActiveSlide.addClass("active");
  
              nextActiveSlide.prev().addClass("prev-1");
              nextActiveSlide.prev().prev().addClass("prev-2");
              nextActiveSlide.addClass("active");
              nextActiveSlide.next().addClass("next-1");
              nextActiveSlide.next().next().addClass("next-2");
          }
  
          var updateToNextSlide = function(nextActiveSlide)
          {
              
          }
      }
      return {
          init: function() {
              initSlider();
          }
      }
  })();
  
  $(function() {
      Slider.init();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider-container {
    display: block;
    height: 270px;
    width: auto;
    margin: 0 auto;
    position: relative;
    max-width: 1300px;
    margin-top: 20px;
  }
  .slider-container .arrow-left {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    color: white;
    font-size: 28px;
    cursor: pointer;
    z-index: 9;
    border-top: 15px solid transparent;
    border-right: 30px solid #C85054;
    border-bottom: 15px solid transparent;
  }
  @media (max-width: 768px) {
    .slider-container .arrow-left {
      display: none;
    }
  }
  .slider-container .arrow-right {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    color: white;
    font-size: 28px;
    cursor: pointer;
    z-index: 9;
    border-top: 15px solid transparent;
    border-left: 30px solid #C85054;
    border-bottom: 15px solid transparent;
  }
  @media (max-width: 768px) {
    .slider-container .arrow-right {
      display: none;
    }
  }
  .slider-container .dots {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin: 30px 0;
    user-select: none;
  }
  .slider-container .dots span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    cursor: pointer;
    user-select: none;
    padding: 10px 0;
    position: relative;
  }
  .slider-container .dots span:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0.6;
  }
  @media (max-width: 768px) {
    .slider-container .dots span {
      width: 23px;
      margin-bottom: 15px;
    }
  }
  .slider-container .dots span.active:before {
    background-color: #C85054;
    opacity: 1;
  }
  .slider-container .slider {
    display: block;
    width: 650px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    line-height: 270px;
    color: white;
  }
  @media (max-width: 768px) {
    .slider-container .slider {
      height: 450px;
    }
  }
  .slider-container .slider .slide {
    display: inline-block;
    width: 80%;
    height: 270px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) scale3d(0.4, 0.4, 1);
    transition: transform 0.3s ease-in-out 0s, z-index .2s ease-in-out .1s;
    background-color: #2C2A40;
  }
  .slider-container .slider .slide:nth-child(odd) {
    background-color: gray;
  }
  @media (max-width: 768px) {
    .slider-container .slider .slide {
      width: 100%;
      height: 450px;
    }
  }
  .slider-container .slider .slide:nth-child(1) {
    background-color: #505E63;
  }
  .slider-container .slider .slide:nth-child(2) {
    background-color: #62698C;
  }
  .slider-container .slider .slide:nth-child(3) {
    background-color: #2C2A40;
  }
  .slider-container .slider .slide:nth-child(4) {
    background-color: #C85054;
  }
  .slider-container .slider .slide:nth-child(5) {
    background-color: #F1BB70;
  }
  .slider-container .slider .slide.prev-2 {
    transform: translate3d(-105%, -50%, 0) scale3d(0.4, 0.4, 1);
    z-index: 1;
    opacity: 0.5;
  }
  .slider-container .slider .slide.prev-1 {
    transform: translate3d(-85%, -50%, 0) scale3d(0.6, 0.6, 1);
    z-index: 2;
  }
  .slider-container .slider .slide.next-1 {
    z-index: 2;
    transform: translate3d(-15%, -50%, 0) scale3d(0.6, 0.6, 1);
  }
  .slider-container .slider .slide.next-2 {
    z-index: 1;
    transform: translate3d(5%, -50%, 0) scale3d(0.4, 0.4, 1);
    opacity: 0.5;
  }
  .slider-container .slider .slide.active {
    z-index: 3;
    transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.3);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="slider-container"&gt;
    &lt;span class="arrow-left"&gt;&lt;/span&gt;
    &lt;span class="arrow-right"&gt;&lt;/span&gt;
    &lt;div class="slider" id="slider"&gt;
      &lt;div class="slide prev-2"&gt;
        1
      &lt;/div&gt;
      &lt;div class="slide prev-1"&gt;
        2
      &lt;/div&gt;
      &lt;div class="slide active"&gt;
        3
      &lt;/div&gt;
      &lt;div class="slide next-1"&gt;
        4
      &lt;/div&gt;
      &lt;div class="slide next-2"&gt;
        5
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        6
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        7
      &lt;/div&gt;
      &lt;div class="slide"&gt;
        8
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dots"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span class="active"&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me fix this. Thanks. </p>