2

any help with this would be greatfully appreciated!

I'm trying to implement the script from:

www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

but I would like it to loop continuously, I've managed to get it to loop back and forth:

 var totalSlides = 0;
 var currentSlide = 1;
 var contentSlides = "";

 $(document).ready(function(){
   $("#slideshow-previous").click(showPreviousSlide);
   $("#slideshow-next").click(showNextSlide);

   var totalWidth = 0;
   contentSlides = $(".slideshow-content");
   contentSlides.each(function(i){
     totalWidth += this.clientWidth;
     totalSlides++;
   });
   $("#slideshow-holder").width(totalWidth);
   $("#slideshow-scroller").attr({scrollLeft: 0});
   updateButtons();
 });

function showPreviousSlide()
{
  currentSlide--;
  if (currentSlide < 1) currentSlide = totalSlides;
  updateContentHolder();
  updateButtons();
 }

 function showNextSlide()
 {
   currentSlide++;
   if (currentSlide > totalSlides) currentSlide = 1;
   updateContentHolder();
   updateButtons();
 }

 function updateContentHolder()
 {
   var scrollAmount = 0;
   contentSlides.each(function(i){
     if(currentSlide - 1 > i) {
       scrollAmount += this.clientWidth;
     }
  });
  $("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);
 }

 function updateButtons()
 {
 if(currentSlide < totalSlides) {
   $("#slideshow-next").show();}

 if(currentSlide > 1) {
   $("#slideshow-previous").show();}
 }

I've been looking at this for 2 nights now and can't work it out.

Can anyone please help?

Thanks in advance.

1

2 Answers 2

1

Dave, the reason that the slideshow 'ping-pongs' is that

$("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);

just points back to the original position when you hit the ends, and so animates back there.

Try This:

css changes thusly

.slideshow-content {
  float: left;
  position: absolute;  
}

javascript changes thusly

// it's nice to work with 0 indexed counters
var totalSlides = -1; 
var currentSlide = 0;
var contentSlides = "";

 $(document).ready(function(){
   $("#slideshow-previous").click(showPreviousSlide);
   $("#slideshow-next").click(showNextSlide);

   var totalWidth = 0;
   contentSlides = $(".slideshow-content");
   contentSlides.each(function(i){
     totalSlides++;
     //each element is hidden until needed
     $(this).css('left', -100000);  
   });

   //set the position of the first slide
   $(contentSlides[0]).css('left', 0);  

   updateButtons();
 });

function showPreviousSlide()
{
  updateSlides( -1 );
  currentSlide--;
  if (currentSlide < 0) currentSlide = totalSlides; 
  updateButtons();
 }

 function showNextSlide()
 {
   updateSlides( 1 );
   currentSlide++;
   if (currentSlide > totalSlides) currentSlide = 0;   
   updateButtons();
 }

 function updateSlides( direction )
 {
    var scrollAmount = 0;

    var currSlideObj = contentSlides[ currentSlide ];       
    var nextSlideObj = contentSlides[ getNextSlide( direction ) ];

    $( contentSlides ).each( function(){
        if ( this != currSlideObj && this != nextSlideObj ) {
            //each element is hidden until needed
            $(this).css('left', -100000);   
        }
    });

    if ( direction > 0 ) {
        //set the position of the next slide when 'next' pushed
        $( nextSlideObj ).css('left', parseInt($( currSlideObj ).css('left')) + $( currSlideObj ).width());
        //set the amount to animate
        scrollAmount = parseInt($( currSlideObj ).css('left')) - $( currSlideObj ).width();
    } else {
        //set the position of the next slide when 'previous' pushed
        $( nextSlideObj ).css('left', parseInt($( currSlideObj ).css('left')) - $( nextSlideObj ).width());
        //set the amount to animate
        scrollAmount = parseInt($( currSlideObj ).css('left')) + $( currSlideObj ).width();
    }

    // we'll animate the slide objects independently
    $( currSlideObj ).animate({left: scrollAmount}, 1000);
    $( nextSlideObj ).animate({left: 0}, 1000); 

 }

 function getNextSlide( direction ) 
 {
    if ( ( currentSlide + direction ) > totalSlides ) {
        return 0;
    } else if ( ( currentSlide + direction ) < 0 ) {
        return totalSlides;     
    }

    return  currentSlide + direction;

 }

 function updateButtons()
 {
 if(currentSlide < totalSlides) {
   $("#slideshow-next").show();}

 if(currentSlide > 0) {
   $("#slideshow-previous").show();}
 }

Here is how it works:

each element is hidden offscreen until it's needed.

when a button is pressed,

the two images that must move together are identified.

their positions are set, and all others are hidden offscreen again.

they are animated to new positions.

I also transformed most of your index tests so that they would be zero-based, which is how most modern languages like to interpret collection indexes.

FYI, I expected totalSlides to increment to 2, but it increments to 3, so setting it to -1 feels hacky - probably a different looping structure is called for or something.

also, caveat emptor - I haven't tested this on anything but Firefox, so your mileage may vary.

5
  • Thank you both soooo much for responding to my post. Almost there - ajaxalex - your solution worked brilliantly. However I have multiple "slides" on my page. The slideshow area is 100% the width on the window so I need to have at least 3 or 4 in view at any one time, any ideas?
    – Dave
    Mar 30, 2011 at 22:50
  • 1
    well, this solution isn't optimized for multiple slides, but the brute force way would be to replicate the pattern of 'currentSlideObj' and 'nextSlideObj' with others ( as many as are needed to fill the screen ), and repeat the animate command for as many as you have.
    – ajaxlex
    Mar 30, 2011 at 23:38
  • @Dave if @ajaxlex answered your question, you should accept the answer. If you have ANOTHER question, don't punish @ajaxlex by not accepting here... instead, ask another question. May 8, 2011 at 21:55
  • Sorry @ajaxlex, @rockinthesixstring has showed me the error of my ways! - What you suggested worked, but I had some inconsistent/unpredictable results so decided that I would go with a different carousel! Thanks again for your help and patience!!
    – Dave
    May 10, 2011 at 20:25
  • 1
    Hi Dave - If you select the check box ( to the left of my answer, I believe ) then I'll get credit, and will be inspired to do more good deeds throughout the cosmos.
    – ajaxlex
    Jul 12, 2011 at 20:53
0

I had to create something similar from scratch working with ExtJS for which I asked this question which contains the JavaScript source code I ended up using, but ultimately it was based on jquery.slideShow by Marcel Eichner. It turned out to be reasonably easy to 'roll-my-own', so to speak, but there are plenty of jQuery options out there for you to try.

Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.