Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Adam Smallman
Adam Smallman
218 Points

jQuery image slider not cycling through images

Hello, I am having an issue with an image slider that I put together (with the help of some stackoverflow guy)

The slider is working it goes back and forth but once the user get to the end of the images the images disappear, it does not cycle through the images.

This is the html

    <head>
        <link rel="stylesheet" href="slide.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="slideshow">
            <div class="item ">
                <img src="img/and/images01.jpg">
            </div>
            <div class="item ">
                <img src="img/and/images02.jpg">
            </div>
            <div class="item active">
                <img src="img/and/images03.jpg">
            </div>
        </div>

        <div class="right"></div>
        <div class="left"></div>
    </body>
    <html>

and this is the Jquery,

    <script>
        $(".slideshow > div:last").show();

$(".left").click(function(){
    var $active = $('.slideshow .active');
    $('.active')
        .fadeOut(500)
        .removeClass('active')
        .prev()
        .addClass('active')
        .fadeIn(500);
});
$(".right").click(function(){
    var $active = $('.slideshow .active');
    $('.active')
        .fadeOut(500)
        .removeClass('active')
        .next()
        .addClass('active')
        .fadeIn(500);
});
    </script>

This works, it just won't cycle through the images once the user gets to the end.

Thanks for any help on this one guys

1 Answer

Chase Swanson
PLUS
Chase Swanson
Courses Plus Student 8,886 Points
Chase Swanson
Chase Swanson
Courses Plus Student 8,886 Points

Wouldn't you need to add a conditional that would look to see how the current displayed div compares where it is in the list of objects?. If it is on the last div, than "right" should send it back to first. If on the first, "left" should send it to the end.

Just a thought.