CODEWITHSUNDEEP
javascriptjquery
Панайот Толев
Панайот Толев

Reputation: 6607

From the last slide to the first slide with slideUp/slideDown

I made my slider but it's acting wierd when it reach the last slide and have to start again on the first. Until getting to the last slide it slides upwards, but when it has to go to the first it does it downwards. And it kind a misses the first one. I mean - it shows it (even downwards), but on my pagination dots it doestn't add class .selected to the first one. After that it acts normally again until the next cycle.

Why is that two things happening. I've tried to change the if(active_slide.index() == last_slide.index()) with if(active_slide.next().length == 0) /and < /; if(active_slide.is(last_slide)) ... it didn;t help.

Here is jsfiddle http://jsbin.com/iwiroq/4/edit.

Upvotes: 0

Views: 194

Answers (2)

Olaf Dietsche
Olaf Dietsche

Reputation: 74108

Building on @yabol's answer, I've built a minimal example with a rolling image list

HTML:

<div class="image-slider">
    <ul>
        <li><img src="http://lorempixel.com/400/200/sports" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/food" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/city" alt="" /></li>
        <li><img src="http://lorempixel.com/400/200/nature" alt="" /></li>
    </ul>
</div>

JS:

var image_list = $('.image-slider li');
image_list.hide();
var first_child = '.image-slider li:first-child';
var last_slide = $('.image-slider li:last-child');
var last_index = last_slide.index();
var active_slide = $(first_child);
active_slide.show();
setInterval(next, 5000);

function next(){
    active_slide.slideUp();
    if (active_slide.index() >= last_index)
        $(first_child).insertAfter(active_slide);

    active_slide = active_slide.next();
    active_slide.slideDown();
}

JSFiddle or Tinker for playing.

Upvotes: 2

Jan.J
Jan.J

Reputation: 3080

The reason it slides downwards instead of upwards is because first element of the list is higher in dom tree than the last one. You can work it around by adding first element also as the last one, and the last one element gets loaded you swap it with first.

Upvotes: 0

Related Questions