настроить функцию setinterval для получения бесконечных повторений

Question

У меня есть ползунок, и время с функцией setInterval не работает должным образом, учитывая учебник, на который я ссылаюсь.Обычно он должен менять слайд через каждые 14 секунд, переходя с одного слайда на другой.Но мой setInterval не повторяется.

Что происходит?

$(document).ready(function() {
  var imgItems = $('.slider li').length; //NUMBER OF SLIDES
  var imgPos = 1;

  //------------------------

  $('.slider li').hide(); // to hide the slides
  $('.slider li:first').show(); // to show the slides


  //------------------------------
  $('.right span').click(nextSlider);
  $('.left span').click(prevSlider);


  setInterval(function() {
    nextSlider();
  }, 14000);

  // FUNCTIONS =========================================================


  function nextSlider() {
    if (imgPos >= imgItems) {
      imgPos = 1;
    } else {
      imgPos++;
    }

    $('.slider li').hide(); //TO HIDE ALL THE OTHER SLIDES
    $('.slider li:nth-child(' + imgPos + ')').fadeIn(); // TO SHOW THE SLIDE SELECTED

  }

  function prevSlider() {
    if (imgPos <= 1) {
      imgPos = imgItems;
    } else {
      imgPos--;
    }

    $('.slider li').hide();
    $('.slider li:nth-child(' + imgPos + ')').fadeIn();
  }

});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

.slideshow {
  position: relative;
  width: 100%;
}

.slider ul,
li {
  width: 100%;
}

.slider li img {
  width: 100%;
}

.slider .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 10%;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
}

.slider .caption h1 {
  font-family: 'robotoblack', sans-serif;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
  padding: 15px 0px;
  line-height: 1.3;
  letter-spacing: 0px;
}

.slider .caption p {
  font-family: 'robotoregular', sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 10px 0 30px 0;
  padding: 0px 30px 10px 0;
  line-height: 1.6;
}

.slider .caption a {
  font-family: 'robotoregular', sans-serif;
  font-size: 16px;
  color: #fff;
  width: 120px;
  background-color: #5cadd3;
  border-bottom: 3px solid #318bb4;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.left,
.right {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 35px;
  z-index: 2;
  cursor: pointer;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="slideshow">
  <ul class="slider">
    <li>
      <img src="images/img1.jpg" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>: lorem ipsum <br> lorem ipsum</h1>
        <p>lorem ipsum lorem ipsum!</p>
        <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
    <li>
      <img src="images/img2.jpg" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>:lorem ipsum <br> lorem ipsum !</h1>
        <p>lorem ipsum lorem ipsum lorem ipsum !</p>
        <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
  </ul>

  <div class="left">
    <span class="fas fa-chevron-left"></span>
  </div>
  <div class="right">
    <span class="fas fa-chevron-right"></span>
  </div>
</div>

Answer 1

Кажется, что setInterval и анимация затухания не работают вместе в старых версиях jQuery.Но ваш код, кажется, работает с более новой версией.Ниже я использую версию 2.1.1.

Для получения дополнительной информации см .:
jQuery .fadeIn + window.setInterval = Плохая комбинация
Анимациине следует ставить в очередь с помощью setInterval или setTimeout
Являются ли setInterval () и setTimeout () плохими вещами в современной анимации jQuery?

$(function() {

  var imgItems = $('.slider li').length;
  var imgPos = 1;

  $('.slider li').hide();
  $('.slider li:first').show();

  $('.right span').click(nextSlider);
  $('.left span').click(prevSlider);


  setInterval(function() {
    nextSlider();
  }, 1400);


  // FUNCTIONS =========================================================


  function nextSlider() {
    if (imgPos >= imgItems) {
      imgPos = 1;
    } else {
      imgPos++;
    }

    $('.slider li').hide();
    $('.slider li:nth-child(' + imgPos + ')').fadeIn(); 

  }

  function prevSlider() {
    if (imgPos <= 1) {
      imgPos = imgItems;
    } else {
      imgPos--;
    }

    $('.slider li').hide();
    $('.slider li:nth-child(' + imgPos + ')').fadeIn();
  }

});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

.slideshow {
  position: relative;
  width: 100%;
}

.slider ul,
li {
  width: 100%;
}

.slider li img {
  width: 100%;
}

.slider .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 10%;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
}

.slider .caption h1 {
  font-family: 'robotoblack', sans-serif;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
  padding: 15px 0px;
  line-height: 1.3;
  letter-spacing: 0px;
}

.slider .caption p {
  font-family: 'robotoregular', sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 10px 0 30px 0;
  padding: 0px 30px 10px 0;
  line-height: 1.6;
}

.slider .caption a {
  font-family: 'robotoregular', sans-serif;
  font-size: 16px;
  color: #fff;
  width: 120px;
  background-color: #5cadd3;
  border-bottom: 3px solid #318bb4;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.left,
.right {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 35px;
  z-index: 2;
  cursor: pointer;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="slideshow">
  <ul class="slider">
    <li>
      <img src="//picsum.photos/200/300?image=50" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>: lorem ipsum <br> lorem ipsum</h2>
          <p>lorem ipsum lorem ipsum!</p>
          <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
    <li>
      <img src="//picsum.photos/200/300?image=42" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>:lorem ipsum <br> lorem ipsum !</h1>
        <p>lorem ipsum lorem ipsum lorem ipsum !</p>
        <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
  </ul>

  <div class="left">
    <span class="fas fa-chevron-left"></span>
  </div>
  <div class="right">
    <span class="fas fa-chevron-right"></span>
  </div>
</div>

Answer 2

Похоже, что используемая версия jQuery показывает предупреждение об устаревании.Вы пробовали последнюю версию jQuery?Я заменил использованную версию на ваш HTML-код:

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximun-scale=1.0 minimun-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <title></title>
</head>

<body>
  <div class="slideshow">
    <ul class="slider">
      <li>
        <img src="images/img1.jpg" />
        <section class="caption">
          <h1><span class="textblue">lorem ipsum</span>: lorem ipsum <br> lorem ipsum
            <p>lorem ipsum lorem ipsum!</p>
            <a href="#services">Plus d'Infos !</a>
        </section>
      </li>
      <li>
        <img src="images/img2.jpg" />
        <section class="caption">
          <h1><span class="textblue">lorem ipsum</span>:lorem ipsum <br> lorem ipsum !</h1>
          <p>lorem ipsum lorem ipsum lorem ipsum !</p>
          <a href="#services">Plus d'Infos !</a>
        </section>
      </li>
    </ul>

    <div class="left">
      <span class="fas fa-chevron-left"></span>
    </div>
    <div class="right">
      <span class="fas fa-chevron-right"></span>
    </div>
    <footer>
      <script src="js/slider.js"></script>
    </footer>
</body>

</html>