JQuery image slider with actual slides as next / previous triggers

Question

I am a designer, I have only a little idea about jQuery. But I love learning :) So I decided to do it myself, and I can’t get it to work.

My idea is to have a slider with actual slides as next / prev buttons. So I can go to the next slide by clicking on the next next slide - the same for the previous slide. I think the picture below shows what I mean.

Desired effect

I tried to do it as follows:

• assign .main class to main image
• assign .prev class to partially hidden image on the left
• assign .next class to partially hidden image on the right

And when I click .next, I change the classes .main> .prev, .next> .main, .next +1> .next.

Now I can do it one step, and it works, the classes change, and it works fine. But then when I click on the now-.next class, jQuery does not seem to recognize it .next now and answers it as if it were a .main class. Updated classes do not respond (now .main class still works as .next, as if jQuery hadn't read the changes).

Here's the HTML:

<div class="view">
    <ul>
        <li class="left" data-id="1"></li>
        <li class="main" data-id="2"></li>
        <li class="right" data-id="3"></li>
        <li data-id="4"></li>
        <li data-id="5"></li>
    </ul>
</div>

And the script:

$(".next").click(function(){
    $(this).prev().removeClass("main").addClass("prev");
    $(this).removeClass("next").addClass("main");
    $(this).next().addClass("next");
    $(".view ul li:first").animate({marginLeft: '-=57%'});
    $(".view ul li.main").animate({marginLeft: '-=15%'});
});

I suppose this is the baby for you, but maybe you could help me get it to work. How would you come to this issue? Any ideas?

Thanks so much ahead!

Hurrah!

Answer 1

Actually, this is not a conversation about babies, because there are several pitfalls that you need to know about.

, click .next .

$('body').on('click', 'li.next', function() {

.
, .prev

$(".prev").removeClass("prev");

: $(".view ul li:first").animate({marginLeft: '-=57%'});, , .prev. ( li.prev). , , class="prev" left (, ).

: http://jsfiddle.net/a8Lf9r68/3/

---

@Mō Iđɍɨɇƶ, . , , , .