Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Dave Six
Dave Six
8,366 Points

Crossfade Images in List

I'm trying to fade in images on click on a text. My problem is that I don't know how to cycle through the images.

the HTML looks like this:

<div class="flexslider">
<ul class="slides">
<li><img src="img_1.jpg"></li>
<li><img src="img_2"></li>
<li><img src="img_3"></li>
</ul>
</div>

The script is almost working except that it's just fading once

jQuery(function(){
            jQuery('.flexslider .slides li:gt(0)').hide();
            setInterval(function(){
                    jQuery('.flexslider .slides li:first-child').fadeOut()
                        .next('li').fadeIn() },
                3000);
        });

I also tried changing the Selector on line 4 without the first-child but I did not work as expected since it's fading directly to the last image and just repeating fading in the last image.

I hope you guys can help me out a little.

Dave

2 Answers

Erik Krieg
Erik Krieg
43,038 Points

Try creating a class, maybe something like "active-slide", and placing it on the first slide you want to activate. You can then use this class to in your selector and when it is time to switch to a new slide you can remove the class and add it to the next element.

Here is an example (untested code):

jQuery(function(){
    jQuery('.flexslider .slides li').hide();
    jQuery('.flexslider .slides li.active-slide').show();
    setInterval(function(){
            jQuery('.flexslider .slides li.active-slide').fadeOut().removeClass("active-slide").next('li').addClass("active-slide").fadeIn() },
        3000);
});

Hopefully it is relevant to your question and helpful :D

Erik Krieg
Erik Krieg
43,038 Points

I gave it a test run, and the following js does loop properly.

<div class="flexslider">
    <ul class="slides">
        <li style="border: 5px solid red;" class="active-slide"><img width="100" height="100" src="img_1.jpg"></li>
        <li style="border: 5px solid green;"><img width="100" height="100" src="img_2.jpg"></li>
        <li style="border: 5px solid blue;"><img width="100" height="100" src="img_3.jpg"></li>
    </ul>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $(function(){
        $('.flexslider .slides li').hide();
        $('.flexslider .slides li.active-slide').show();
        setInterval(function(){

            if( $('.flexslider .slides li.active-slide').is(':last-child')  ) {
                $('.flexslider .slides li.active-slide').fadeOut().removeClass("active-slide");
                $('.flexslider .slides li:first-child').addClass("active-slide").fadeIn();
            } else {
                $('.flexslider .slides li.active-slide').fadeOut().removeClass("active-slide").next('li').addClass("active-slide").fadeIn();
            }

        }, 3000);
    });
</script>
Dave Six
Dave Six
8,366 Points

Hey Erik,

thanks a lot for your reply! The code is working just fine! Thanks again mate!

Dave