CODEWITHSUNDEEP
jqueryhtmlimageanimationjquery-animate
Joshua W
Joshua W

Reputation: 1597

Building a jQuery Image Slider with animation

So I'm somewhat new to jQuery, but I have a couple months experience. My question goes like this.

I built an image slider that loops through a div and animates the photos "sliding in right to left" when I click the NEXT button. My problem, however, is changing it to "slide left to right" when I click the previous button.

In my code I've tried moving my animate margin-left.fadeOut statement into the if btn has class next conditional, and replacing that with .queue(function), .css(function), .animate(function) and a few others, but nothing is seeming to work and I can't leave it on the top line because it effects the previous conditional which I want to work in the opposite that my next button is going.

I have been very much stuck on this for weeks and I keep coming back to this point that works halfway. Can anybody steer me in the right direction. I'm stumped.

Here is what I have so far.

<body>
    <section class="photos">
        <div class="slider">
            <div class="photo">
                <img src="images/photoOne.png">
            </div>
            <div class="photo hidden">
                <img src="images/photoTwo.png">
            </div>
            <div class="photo hidden">
                <img src="images/photoThree.png">
            </div>
        </div> 


    <div class="buttons">
        <a href="#" class="btn prev">Previous</a>
        <a href="#" class="btn next">Next</a>
    </div>
</section>
</body>

<script src="jquery-1.9.1.js"></script>

<script>
var activePhoto = 0;

$('.btn').click(function() {

var $btn = $(this);

$photoBox.eq(activePhoto).animate({ 
"margin-left": "-=744px"}, "fast").fadeOut(function () {

    if ($btn.hasClass('next')) {
        if (activePhoto == $photoBox.length - 1) {
            activePhoto = 0;
        } else {
            activePhoto++;
        }

        $photoBox.eq(activePhoto - 1).css({
            "margin-left": "+=744px"
        });

        $photoBox.eq(activePhoto).css({
            "margin-left": "+=744px"
        });

        $photoBox.eq(activePhoto).fadeIn().animate({
            "margin-left": "-=744px"
        }, "fast");

    } else if ($btn.hasClass('prev')) {

        if (activePhoto == 0) {
            activePhoto = $photoBox.length - 1;
        } else {
            activePhoto--;
        }
    }

});

});

</script>

As I said, it works just fine like this when I click next, but getting it to do the opposite when I click previous is giving me problems. If this makes sense, this is what I was trying to do with my jQuery. 

<script>
var activePhoto = 0;

$('.btn').click(function() {

var $btn = $(this);

$photoBox.eq(activePhoto).queue(function () {
    if ($btn.hasClass('next')) {

        if (activePhoto == $photoBox.length - 1) {
            activePhoto = 0;
        } else {
            activePhoto++;
        }

        $photoBox.eq(activePhoto - 1).animate({
           "margin-left": "-=744px"}, "fast").fadeOut();

        $photoBox.eq(activePhoto - 1).css({"margin-left": "+=744px"});

        $photoBox.eq(activePhoto).css({"margin-left": "+=744px"});

        $photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "-=744px"}, "fast");

    } else if ($btn.hasClass('prev')) {

        if (activePhoto == 0) {
            activePhoto = $photoBox.length - 1;
        } else {
            activePhoto--;
        }

        $photoBox.eq(activePhoto + 1).animate({"margin-left": "+=744px"}, "fast").fadeOut();

        $photoBox.eq(activePhoto + 1).css({"margin-left": "-=744px"});

        $photoBox.eq(activePhoto).css({"margin-left": "-=744px"});

        $photoBox.eq(activePhoto).fadeIn().animate({"margin-left": "+=744px"}, "fast");

    }
});

});

</script>

I hope that makes sense :)

Here are two jsfiddles I have for my example. Perhaps this will illustrate my problem for you. The first one is how it currently works with the next button and the images sliding from right to left. The second is what I am attempting to do, a reverse of the animation for the previous button with the image sliding out to the right of the caption, the subsequent image fading in on the left of the caption and then sliding in above the caption. Neither the previous nor next buttons work properly in the second example.

http://jsfiddle.net/jay_dub/dtdZc/

http://jsfiddle.net/jay_dub/naKub/

Upvotes: 1

Views: 8071

Answers (2)

Joshua W
Joshua W

Reputation: 1597

OK :) I got it!

Since I had two classes on my button I used took your idea of splitting them up as such

$('.next').click(function() {
  var $btn = $(this); 
  var $photoBox = $('.slider').find('.photo');
$photoBox.eq(activePhoto).animate({"margin-left": "-=744px"}, "fast").fadeOut(function() {

with the first half of the conditional statement and

$('.prev').click(function() {
  var $btn = $(this); 
  var $photoBox = $('.slider').find('.photo');
$photoBox.eq(activePhoto).animate({"margin-left": "+=744px"}, "fast").fadeOut(function() {

with the second half of the conditional statement which almost worked, but the math was still off for the previous button and wasn't reseting the correct photo, so I needed to subtract one less than the total number of photos (ie. 3 photos so -2) and everything worked brilliantly! Awesome!

Upvotes: 0

Jean-Paul
Jean-Paul

Reputation: 21150

Well, I basically spend an hour preparing this for you so I hope you appreciate it :)

What you want to do is do the exact same backwards for if you click previous:

$(".btn_next").click(function()
   {
             $(".slider").animate({
            "margin-left": "+=-100px"
            }, "fast"); 
   });

$(".btn_prev").click(function()
   {
             $(".slider").animate({
            "margin-left": "+=100px"
            }, "fast"); 
           current--;
   });

But how to implement this?

Well, I prepared a live example for you: http://jsfiddle.net/qPPL8/5/

Try to understand exactly what I do there and why it works.

If you do that, you can use the exact same method for your code.

NOTE: I enhanced the code a bit to incorporate the fact that it is possible to 'run out of photos'. You can see how I did that with the if statements in the JsFiddle.

I hope that answers your question.

Upvotes: 2

Related Questions