configure setinterval function to get infinite repetitions

Question

I have a slider and the timing with the setInterval function is not working as it should, considering the tutorial I'm referencing. Normally, it should change the slide after every 14 seconds, changing from one slide to another. But my setInterval is not repeating.

What is going on?

$(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>

jQuery is undefined in your last code snippet - can you fix snippet please? — CSSBurner, Jun 04 '18 at 18:10

score 0 · Answer 1 · answered Jun 04 '18 at 18:27

It seems that your used jQuery Version shows a deprecation warning. Have you tried an up to date jQuery version? I replaced the used version on your HTML snipped:

<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>

score 0 · Accepted Answer · answered Jun 04 '18 at 18:28

It seems that setInterval and fade animations don't work well together in older versions of jQuery. But your code seems to work with a newer version. Below, I'm using version 2.1.1.

For further reference, see:
jQuery .fadeIn + window.setInterval = A Bad Combination
Animations should not be queued with setInterval or setTimeout
Is setInterval() and setTimeout() bad things to do in modern jQuery animations?

$(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>

configure setinterval function to get infinite repetitions

2 Answers2