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 slide, flash back and forth through slides

Hi again!

I am having an issue with an image slider that is starting on the first image then going to the next image only to stay for half a sec and then back to the first slide and then does the same to the final slide, it then goes back to the first slide and works as it should from there.

I would link a jsfiddle but the Jquery does not work. Here is the code for the html css and jQuery

HTML

<div class="bgSlider"> 
            <div>
                <img src="img/walk.jpg">
            </div>
            <div>
                <img src="img/afternoon.jpg">
            </div>
            <div>
                <img src="img/ddd.jpg">
            </div>
        </div>

CSS

.one .bgSlider{
    margin: 50px auto; 
    position: relative; 
    width: 100%; 
    height: auto; 
}


.one .bgSlider div img{
    width: 100%;
    height: 100%;
    min-height: 600px; 
}

.bgSlider > div { 
    position: absolute; 
    width: 100%; 
}

Jquery

<script>
        $(".bgSlider > div:gt(0)").hide();

setInterval(function() { 
  $('.bgSlider > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.bgSlider');
},  3000);
    </script>

It is though the slider goes through the whole list of images before starting normal.

Chyno Deluxe
Chyno Deluxe
16,936 Points

//Fixed Code Presentation How to post Code

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

It works fine for me. Are you sure you have jQuery included in your jsFiddle?

Demo

Adam Smallman
Adam Smallman
218 Points

I will see if that works, something must be causing the issue somewhere.

Thanks