jQuery slider not going to beginning

Question

I'm working on a little jQuery widget to add to my portfolio/knowledge base. The widget works, and cycles through 5 slides, however, it does not loop back around to slide 1 as it should. It only advances to a blank slide, and the page requires refreshing to move back or forward again. I am a Javascript/jQuery beginner, so I'm sure I'm missing something simple, but I can't figure it out for the life of me. Any assistance is greatly appreciated.

    //(document).ready(); makes sure that all elements on the page are
    //loaded before loading the script
   $(document).ready(function() {
     //alert('Doc is loaded');   

     //specifies speed to change from image to image, in ms
     var speed = 500;

     //specifies auto slider option
     var autoswitch = true;

     //Autoslider speed
     var autoswitch_speed = 4000;

     //Add initial active class
     $('.slide').first().addClass('active');

     //Hide all slides
     $('.slide').hide();

     //Show first slide
     $('.active').show();

     $('#next').on('click', function() {
       $('.active').removeClass('active').addClass('oldActive');
       if ($('.oldactive').is('slider:last-child')) {
         //alert('true');
         $('.slide').first().addClass('active');
       } else {
         $('.oldActive').next().addClass('active');
       }
       $('.oldActive').removeClass('oldActive');
       $('.slide').fadeOut(speed);
       $('.active').fadeIn(speed);

     });

     $('#prev').on('click', function() {
       $('.active').removeClass('active').addClass('oldActive');
       if ($('.oldactive').is(':first-child')) {
         $('.slide').last().addClass('active');
       } else {
         $('.oldActive').prev().addClass('active');
       }
       $('.oldActive').removeClass('oldActive');
       $('.slide').fadeOut(speed);
       $('.active').fadeIn(speed);

     });
   });

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #fff;
  background: #333;
  line-height: 1.6em;
}
a {
  color: #fff;
  text-decoration: none;
}
h1 {
  text-align: center;
  margin-bottom: 20px;
}
#container {
  width: 980px;
  margin: 40px auto;
  overflow: hidden;
}
#slider {
  width: 940px;
  height: 350px;
  position: relative;
  overflow: hidden;
  float: left;
  padding: 3px;
  border: #666 solid 2px;
  border-radius: 5px;
}
#slider img {
  width: 940px;
  height: 350px;
}
.slide {
  position: absolute;
}
.slide-copy {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  background: 7f7f7f;
  background: rgba(0, 0, 0, 0.5);
}
#prev,
#next {
  float: left;
  margin-top: 130px;
  cursor: pointer;
  position: relative;
  z-index: 100;
}
#prev {
  margin-right: -45px;
}
#next {
  margin-left: -45px;
}

<!DOCTYPE html>
<html>

<head>
  <title>jQuery Content Slider</title>
  <link rel="stylesheet" href="css/style.css">

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

<body>
  <div id="container">
    <header>
      <h1>jQuery Content Slider</h1>
    </header>
    <img src="img/arrow-left.png" alt="Prev" id="prev">
    <div id="slider">
      <div class="slide">
        <div class="slide-copy">
          <h2>Slider One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide1.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Two</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide2.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Three</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide3.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Four</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide4.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Five</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="img/slide5.jpg">
      </div>
    </div>
    <img src="img/arrow-right.png" alt="Next" id="next">
  </div>
</body>

</html>

Jinu Kurian · Accepted Answer

var cur = 0,    // Start Slide Index. We'll use ++cur to increment index
    pau = 2000,            // Pause Time (ms)
    fad = 500,             // Fade Time (ms)
    $ga = $('#slider'),   // Cache Gallery Element
    $sl = $('> div', $ga), // Cache Slides Elements
    tot = $sl.length,      // We'll use cur%tot to reset to first slide
    itv ;                  // Used to clear on mouseenter

$sl.hide().eq( cur ).show(); // Hide all Slides but desired one

function stopFn() { clearInterval(itv); }
function loopFn() { itv = setInterval(fadeFn, pau); }
function fadeFn() { $sl.fadeOut(fad).eq(++cur%tot).stop().fadeIn(fad); }
$ga.hover( stopFn, loopFn );

loopFn(); // Finally, Start

Add this code in the script. this will enable looping effect. Tried working with your code, but its a little bit complex for me. Try this method, this will work like a charm.

See the DEMO

See the snippet

//(document).ready(); makes sure that all elements on the page are
     //loaded before loading the script
    $(document).ready(function() {
      //alert('Doc is loaded');   

      //specifies speed to change from image to image, in ms
      var speed = 1000;

      //specifies auto slider option
      var autoswitch = true;

      //Autoslider speed
      var autoswitch_speed = 4000;

      //Add initial active class
      $('.slide').first().addClass('active');

      //Hide all slides
      $('.slide').hide();

      //Show first slide
      $('.active').show();

      $('#next').on('click', function() {
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldactive').is('slider:last-child')) {
          //alert('true');
          $('.slide').first().addClass('active');
        } else {
          $('.oldActive').next().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

      });

      $('#prev').on('click', function() {
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldactive').is(':first-child')) {
          $('.slide').last().addClass('active');
        } else {
          $('.oldActive').prev().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.slide').fadeOut(speed);
        $('.active').fadeIn(speed);

      });
    });


    var cur = 0, // Start Slide Index. We'll use ++cur to increment index
      pau = 1000, // Pause Time (ms)
      fad = 500, // Fade Time (ms)
      $ga = $('#slider'), // Cache Gallery Element
      $sl = $('> div', $ga), // Cache Slides Elements
      tot = $sl.length, // We'll use cur%tot to reset to first slide
      itv; // Used to clear on mouseenter

    $sl.hide().eq(cur).show(); // Hide all Slides but desired one

    function stopFn() {
      clearInterval(itv);
    }

    function loopFn() {
      itv = setInterval(fadeFn, pau);
    }

    function fadeFn() {
      $sl.fadeOut(fad).eq(++cur % tot).stop().fadeIn(fad);
    }
    $ga.hover(stopFn, loopFn);

    loopFn(); // Finally, Start

* {
   margin: 0;
   padding: 0;
 }
 body {
   font-family: 'Arial', sans-serif;
   font-size: 14px;
   color: #fff;
   background: #333;
   line-height: 1.6em;
 }
 a {
   color: #fff;
   text-decoration: none;
 }
 h1 {
   text-align: center;
   margin-bottom: 20px;
 }
 #container {
   width: 980px;
   margin: 40px auto;
   overflow: hidden;
 }
 #slider {
   width: 500px;
   height: 300px;
   position: relative;
   overflow: hidden;
   float: left;
   padding: 3px;
   border: #666 solid 2px;
   border-radius: 5px;
 }
 #slider img {
   width: 500px;
   height: 300px;
 }
 .slide {
   position: absolute;
 }
 .slide-copy {
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 20px;
   background: 7f7f7f;
   background: rgba(0, 0, 0, 0.5);
 }
 #prev,
 #next {
   float: left;
   margin-top: 130px;
   cursor: pointer;
   position: relative;
   z-index: 100;
 }
 #prev {
   margin-right: -45px;
 }
 #next {
   margin-left: -45px;
 }

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

<body>
  <div id="container">
    <header>
      <h1>jQuery Content Slider</h1>
    </header>
    <img src="http://leedspromoproducts.com/templates//img/thumbnails_prev_button.png" alt="Prev" id="prev">
    <div id="slider">
      <div class="slide">
        <div class="slide-copy">
          <h2>Slider One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://www.vectordiary.com/isd_premium/048-hot-air-balloon/hot-air-balloon.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Two</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Three</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://images.china.cn/attachement/jpg/site1007/20110808/000cf1a48f870fa9c75c55.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Four</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://cdn.allsteamboat.com/images/content/5418_gBVhd_Hot_Air_Balloon_Rodeo_in_Steamboat_Springs_md.jpg">
      </div>

      <div class="slide">
        <div class="slide-copy">
          <h2>Slider Five</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
        </div>
        <img src="http://www.moneyindices.com/admin/upload/50193693.jpg">
      </div>
    </div>
    <img src="http://thehaircraftersco.com/wp-content/uploads/2015/10/next-button.png" alt="Next" id="next">
  </div>
</body>

LeviXC · Answer

Your operation has the wrong syntax, it should be "is(':last-child'))"

    if($('.oldActive').is(':last-child')){
        //alert('true');
        $('.slide').first().addClass('active');
    } else {
        $('.oldActive').next().addClass('active');  
    }

jQuery slider not going to beginning

Tags:

javascript

html

jquery

css

slider

Glenak1911

2 Answers

Jinu Kurian

LeviXC

Recent Activity

Donate For Us

jQuery slider not going to beginning

Tags:

javascript

html

jquery

css

slider

Glenak1911

2 Answers

Jinu Kurian

LeviXC

Related questions

Recent Activity

Donate For Us