loop carousel jquery

Question

Possible Duplicate:
my carousel does not work

am a bit puzzled! i got this carousel am creating and i desire that it loops. everything else works out fine, but, when the last image has slid up i want the first one to do the same after it, then the second...infinitely. i have tried many things like appending the first image to the last. i have also tried showing back the images after the last(this one tries but gives an undesirable effect).

i need to be shown what tweaks i need to make. thanks big time!

var images = $("#slideShow div");
var index = 0;
for (i = 0; i < images.length; i++) {
    $(images[i]).addClass("image-" + i);
}

setInterval(function() {
    $(".image-" + (index)).slideUp(1000);
    if (index < images.length - 1) {
        index += 1;
    }   
    else {
        index = 0;
    }    
}, 500);


  #slideShow {
height:20em;
width:80%;
float:right;

}

#slideShow div{
line-height:20em;
float:right;
}   

   #slideShow img{
vertical-align:middle;
border:solid 5px #A5A5A5;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

        <div id="slideShow">
                    <?php

                            $dir = "carousel";
                        $dh = opendir($dir);
                        while($slide = readdir($dh)){
                                $items[] = $slide;
                            }

                            for($i=0; $i<sizeof($items); $i++){
                                                            if($items[$i] !=   "." && $items[$i] != ".."){
                                                   $imagePath = $dir."/".$items[$i];
                                                   $image = "<div>"."<img src = \"".$imagePath."\""." />"."</div>";
                                                    echo $image;

                                        }

                                }
                            closedir($dh);

                        ?>

            </div>

Ah, without a pause? And btw, your slide animation is slower that the setInterval ticks. Makes no sense to me. A demo fiddle would be greatly appreciated — Roko C. Buljan, Nov 27 '12 at 15:01
yep! no pause! yah i did that intentionally for development purposes; for i have a pool of images which a php script is reading from a folder. any help? — Wagaba, Nov 27 '12 at 15:16

Roko C. Buljan · Accepted Answer · 2019-07-16T20:07:36.313

4

Instead of toggling your images that will make the code unreadable and full of z-index changes, just animate the scrollTop of the container element

Animate the scrollTop and inside a callback, redo the loop function and:
reset the scrollTop to 0 and
remove the first element, appending it after the the last one

var $slideShow = $('#slideshow');

function loop() {
  $slideShow.stop().animate({
    scrollTop: 200
  }, 800, 'linear', function() {
    $(this).scrollTop(0).find('div:last').after($('div:first', this));
    loop(); // Recursion
  });
}

loop(); // Start

#slideshow {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

#slideshow img {
  display: block;
}

<div id="slideshow">
  <div><img src="http://placehold.it/200x200/cf5&text=1" alt=""></div>
  <div><img src="http://placehold.it/200x200/f0f&text=2" alt=""></div>
  <div><img src="http://placehold.it/200x200/444&text=3" alt=""></div>
  <div><img src="http://placehold.it/200x200/f70&text=4" alt=""></div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

edited Jul 16 '19 at 20:07

answered Nov 27 '12 at 15:42

Roko C. Buljan

196,159
39
305
313

you have a demo. If you want to see what's happening just remove `overflow:hidden;` – Roko C. Buljan Nov 27 '12 at 15:57
@Wagaba... well? Any news? you're still trying? – Roko C. Buljan Nov 27 '12 at 16:03
wait a moment...should i do away with all my code, or? if not, where should i put this code, or what should it come after? – Wagaba Nov 27 '12 at 16:05
You can clearly see that in my demo there's not a "comma" of your code. Where's the issue bro? – Roko C. Buljan Nov 27 '12 at 16:06
hahahaha! lol! alright let me do that. – Wagaba Nov 27 '12 at 16:16
it is static, this time! – Wagaba Nov 27 '12 at 16:19
@Wagaba see in the demo, go to JSBin -> Download and take the time to explore! And lemme know if anything positive happened on your side! :) Don't forget to add the `document ready` function like in the code above – Roko C. Buljan Nov 27 '12 at 16:21
surprisingly the demo works just fine! – Wagaba Nov 27 '12 at 16:28
the only problem was that my div had an upper S in "slideShow" and i had just pasted your code that had a lowe s. now the problem is one: it does not scroll smoothly! – Wagaba Nov 27 '12 at 16:35
Change 'linear' to 'swing' if you like. And show a demo, cause here works fine – Roko C. Buljan Nov 27 '12 at 17:29

score 0 · Answer 2 · answered Nov 27 '12 at 15:07

0

What you need to do is make a second copy of your images, stick them on the end of the existing ones. That way when you pass the "last" image, the "first" image is visible.

The trick is then to reset the position of the whole lot once the copied "first" image gets to the end of the viewable area.

answered Nov 27 '12 at 15:07

Diodeus - James MacFarlane

112,730
33
157
176

am trying to get your point, but it looks like i tried it already with the append(). this instead distorts my pictures, nothing beta. can you demonstrate, with reference to my simple lines of code? – Wagaba Nov 27 '12 at 15:20
alright! as per your request.this generates the html:

– Wagaba Nov 27 '12 at 15:28
//continued here $image = "
".""."
"; echo $image; } } closedir($dh); ?> – Wagaba Nov 27 '12 at 15:29
the css:#slideShow { height:20em; width:80%; float:right; overflow:hidden; } #slideShow div{ line-height:20em; float:right; } #slideShow img{ vertical-align:middle; border:solid 5px #A5A5A5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } – Wagaba Nov 27 '12 at 15:30
You should really edit the question and put the code samples there. – Diodeus - James MacFarlane Nov 27 '12 at 15:46

loop carousel jquery

2 Answers2

Linked