Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript / Jquery

Why Are Not All Images Showing Up In This Slider?

Post a Comment
Here is my code

Solution 1:

Your script will set class="active" to one of the four divs at a time starting with the first div. Since this is the definition of active CSS class

<style>.active{
        display:none;
    }
</style>

The current div that have class="active" will disappear but the other three won't, and they're placed in the exact same position so only the darker colors can be seen, which are blue and black in this case.

I would suggest using two CSS classes as follows

<style>.active{
        display:block;
    }
    .inactive{
        display:none;
    }
</style>

and changing your script to make one div have class="active" and the rest have class="inactive" at a time, meaning the active div will appear and the inactive divs will disappear.

<script>
    $(document).ready(function() {
        var startSlider = function() {
            var startSlide = $(".slider li:first");
            var nextSlide = $(".active").next("li");

            // remove css class from all divs
            $(".active").removeClass();
            $(".inactive").removeClass();

            if(nextSlide.html() == null) 
            {nextSlide = startSlide;}

            // set nextSlide css class to active
            nextSlide.addClass("active");

            // set the rest of the divs css class to inactive
            nextSlide.siblings().addClass("inactive");

            setTimeout(startSlider, 1000);
        };
        setTimeout(startSlider, 1000);
    });

</script>

Here's the complete code after making the changes above.

<!DOCTYPE html><html><head><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>
    $(document).ready(function() {
        var startSlider = function() {
            var startSlide = $(".slider li:first");
            var nextSlide = $(".active").next("li");

            // remove css class from all divs
            $(".active").removeClass();
            $(".inactive").removeClass();

            if(nextSlide.html() == null) 
            {nextSlide = startSlide;}

            // set nextSlide css class to active
            nextSlide.addClass("active");

            // set the rest of the divs css class to inactive
            nextSlide.siblings().addClass("inactive");

            setTimeout(startSlider, 1000);
        };
        setTimeout(startSlider, 1000);
    });

</script><style>.active{
        display:block;
    }
    .inactive{
        display:none;
    }
</style></head><body><ulclass="slider"style="list-style:none;"><li><divclass="active"style="background:#F00;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li><li><divclass="inactive"style="background:#0F0;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li><li><divclass="inactive"style="background:#00F;height:100px;width:100px;margin:6px; position: fixed; top:100px;"></div></li><li><divclass="inactive"style="background:#000;height:100px;width:100px;margin:6px; position: fixed; top: 100px;"></div></li></ul></body></html>

Here's the working jsfiddle: http://jsfiddle.net/k8qod5g0/

Post a Comment for "Why Are Not All Images Showing Up In This Slider?"