Добавление анимации FadeIn и FadeOut при переходе слайдов и зацикливание галереи

Question

Доброе время суток. Наткнулся на YouTube на видео о том, как сделать простенькую jQuery галерею. В попытках улучшить её, добавить анимации FadeIn и FadeOut при переходе слайдов, зациклить, чтобы можно было переходить с первого на последний, и наоборот, претерпел неудачу, ввиду отсутствия знаний. Прошу вашей помощи.

Попытка сделать анимации FadeIn и FadeOut, но они слишком резкие, и изображение появляется раньше анимации.

По поводу зацикливания, пытался посчитать количество элементов в #slider, var slideCount = $('#slider').children().length;

$(document).ready(function(){
  $('.next').on('click', function(){
    var currentImg = $('.active');
    var nextImg = currentImg.next();

    if(nextImg.length){
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);
      $( ".active" ).fadeOut();
      $( ".active" ).fadeIn();
    }

  });

  $('.prev').on('click', function(){
    var currentImg = $('.active');
    var prevImg = currentImg.prev();


    if(prevImg.length){
      currentImg.removeClass('active').css('z-index', -10);
      prevImg.addClass('active').css('z-index', 10);
      $( ".active" ).fadeOut();
      $( ".active" ).fadeIn();
    }
  });
});

$(document).ready(function() {
  $('.next').on('click', function() {
    var currentImg = $('.active');
    var nextImg = currentImg.next();

    if (nextImg.length) {
      $(".active").fadeIn();
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);
    }

  });

  $('.prev').on('click', function() {
    var currentImg = $('.active');
    var prevImg = currentImg.prev();


    if (prevImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      prevImg.addClass('active').css('z-index', 10);
    }
  });
});

a {
  color: #fff;
  text-decoration: none;
}

h1 {
  text-align: center;
}

.container {
  width: 540px;
  margin: 40px auto;
  overflow: auto;
}

.slider-inner {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
  float: left;
  padding: 3px;
  border: #666 solid 1px;
}

.slider-inner img {
  display: none;
  width: 500px;
  height: 300px;
}

.slider-inner img.active {
  display: inline-block;
}

.prev,
.next {
  float: left;
  margin-top: 130px;
  cursor: pointer;
}

.prev {
  position: relative;
  margin-right: -45px;
  z-index: 100;
}

.next {
  position: relative;
  margin-left: -45px;
  z-index: 100;
}

<!DOCTYPE html>
<html>

<head>
  <title>JQSlider</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="js/main.js"></script>
</head>

<body>
  <div class="container">
    <div class="slider-outer">
      <img src="images/arrow-left.png" class="prev" alt="Prev">
      <div class="slider-inner" id="slider">
        <img src="images/image1.jpg" alt="image1" class="active photo">
        <img src="images/image2.jpg" alt="image2" class="photo">
        <img src="images/image3.jpg" alt="image3" class="photo">
        <img src="images/image4.jpg" alt="image4" class="photo">
        <img src="images/image5.jpg" alt="image5" class="photo">
        <img src="images/image6.jpg" alt="image6" class="photo">
        <img src="images/image7.jpg" alt="image7" class="photo">
        <img src="images/5.jpg" alt="5" class="photo">
      </div>
      <img src="images/arrow-right.png" class="next" alt="Next">
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

Добавление анимации FadeIn и FadeOut при переходе слайдов и зацикливание галереи

Ответы (0 шт):