CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James
James

Reputation: 1706

Making a jQuery image slider stop at last image and adding next and prev buttons

I have the following example which goes through each LI and if you hover image will pause and the continue when you mouseout but this is as far as I have got.

I would like it to stop when it gets to the last LI and also would like to make the 2 links I added wth classes "next" and "prev" so if clicked will move to next or prev image. Of course if at first image to set a class on prev like hidden and if on last image set next button to hidden so cannot be used, however this is as far as I have got.

$( function() {
  var timer;
      lis = $(".productImage");
  
  function showNext() {    
    var active = lis.filter(".active").removeClass("active");
    var next = active.next();
    if (next.length===0) {
      next = lis.eq(0);  
    }
    next.addClass("active");    
  }
  
  function showPrev() {    
    var active = lis.filter(".active").removeClass("active");
    var prev = active.prev();
    if (prev.length===0) {
      prev = lis.eq(0);  
    }
    prev.addClass("active");    
  }

  function playGallery() {
    stopGallery();
    timer = window.setInterval(showNext, 2500);
  }

  function stopGallery() { 
    if (timer) window.clearTimeout(timer);
  }
  
  // move to next image
  $('.galleryNext').on('click', function(event){
    stopGallery();
    showNext();
  });

  // move to previous image
  $('.galleryPrev').on('click', function(event){
    stopGallery();
    showPrev();
  });
  
  // reset slider timer if thumbnail changed
  $('.thumbnail-list li a').on('click', function(event){
    stopGallery();
    playGallery();
  });
  
  // pause image slider if mouse is hovering gallery main image
  $(".featured-image-list")
    .on("mouseleave", playGallery)
    .on("mouseenter", stopGallery);

  playGallery();
  
});
.productImage {
    display : none;  
}

.productImage.active {
    display: block;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="featured-image-list">
  <li class="productImage active">1</li>
  <li class="productImage">2</li>
  <li class="productImage">3</li>
  <li class="productImage">4</li>
  <li class="productImage">5</li>
</ul>
<a class="galleryPrev">prev</a>
<a class="galleryNext">next</a>

Upvotes: 1

Views: 465

Answers (1)

damo-s
damo-s

Reputation: 1008

modifying your code a bare minimum I've come up with this:

JSFIDDLE

Simply placing showNext() and showPrev() within the functions below gets the next and prev buttons working with the caveat that it also stops the slides from auto progressing (and I see in your edit that's what you did):

function nextImage() {
  stopGallery();
  showNext();
}

function prevImage() {
  stopGallery();
  showPrev();
}

I'll leave it up to you to come up with a solution to that.

And you can also edit your showNext and showPrev functions with the addition of the following:

// add to showNext()
if (next.next().length===0) {
    stopGallery();
    nextBtn.addClass("hidden");
}

// add to showPrev()
if (prev.prev().length===0) {
    prevBtn.addClass("hidden"); 
}

Upvotes: 2

Related Questions