jQuery image carousel

https://codereview.stackexchange.com/q/203084/120114

by samonela

HTML

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

<div class="container">
  <div class="slider">
    <div class="slides-container">
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </a>
      <a href="#">
        <img src="https://picsum.photos/1200/300/?gravity=north" alt="">
      </a>
    </div>
  </div>
</div>

CSS

body * {
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.slider {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider .slider-nav {
  text-align: center;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 10px;
  right: 10px;
  bottom: 2px;
  z-index: 30;
}

.slider .slider-nav li {
  display: inline-block;
  width: 20px;
  height: 4px;
  margin: 0 1px;
  text-indent: -9999px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .5);
}

.slider .slider-nav a {
  display: block;
  height: 4px;
  line-height: 4px;
}

.slider .slider-nav li.activeSlide {
  background: #fff;
}

.slider .slider-nav li.activeSlide a {
  display: none;
}

.slider .slider-container {
  width: 100%;
  text-align: center;
}

.slider .slides-container a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.slider .slides-container img {
  transform: translateX(-50%);
  margin-left: 50%;
}

JavaScript

$(function() {
  var $elm = $('.slider'),
    $slidesContainer = $elm.find('.slides-container'),
    slides = $slidesContainer.children('a'),
    slidesCount = slides.length,
    slideHeight = $(slides[0]).find('img').outerHeight(false),
    animationspeed = 1500,
    animationInterval = 7000;

  var activeIdx = 0;
  var previousIdx = 0; // First slide
  var shuffle = function(slides) {
    var j, x, i;
    for (i = slides.length - 1; i > 0; i--) {
      j = Math.floor(Math.random() * (i + 1));
      x = slides[i];
      slides[i] = slides[j];
      slides[j] = x;
    }
    return slides;
  }
  shuffle(slides);

  // Set (initial) z-index for each slide
  var setZindex = function() {
    for (var i = 0; i < slidesCount; i++) {
      $(slides[i]).css('z-index', slidesCount - i);
    }
  };
  setZindex();

  var setActiveSlide = function() {
    $(slides).removeClass('active');
    $(slides[activeIdx]).addClass('active');
    $(bullets).removeClass('activeSlide');
    $(bullets[activeIdx]).addClass('activeSlide');
  };

  function showSlideAtActiveIndex(resetInterval) {
    setActiveSlide();
    slideUpDown(); //previousIdx, activeIdx);
    previousIdx = activeIdx;
  }

  var advanceFunc = function() {
    activeIdx = ++activeIdx % slidesCount;
    showSlideAtActiveIndex();
  }

  var autoAdvance = setInterval(advanceFunc, animationInterval);

  //Set slide height
  $(slides).css('height', slideHeight);

  // Append bullets
  if (slidesCount > 1) {
    /* Prepend the slider navigation to the slider
       if there are at least 2 slides */
    $elm.prepend('<ul class="slider-nav"></ul>');

    // make a bullet for each slide
    for (var i = 0; i < slidesCount; i++) {
      var bullet = $('<li>').html('<a href="#">' + i + '</a>');
      if (i == 0) {
        bullet.addClass('activeSlide');
        // active bullet
        // active slide
        $(slides[0]).addClass('active');
      }
      $('.slider-nav').append(bullet);
    }
  };
  var bullets = $('.slider-nav...