Simple image transition carousel without controls

simple image caroussel slider

This is as simple as it gets. A image transition carousel without controls or arrows, to display something.

See a working example here

jQuery

    
var fadeLoop = function($el) {
    $el.delay(2000).fadeOut(500, function() {
        var $next = $el.next();
        if ($next.length == 0) {
            $next = $el.siblings(":first");
        }
        $next.fadeIn(1500, function() {
            fadeLoop($next);
        });
    });
};
$(".slide1").siblings().hide();fadeLoop($(".slide1"));

CSS

    
.wrapper { width:600px;border:1px solid #666666; padding:20px;margin: 0 auto;}
.slide, .slide1 {width:600px;height:300px;text-align: center;font-size:36px;padding-top:100px;color:#ffffff;}
.grey {background: #999999;}
.blue {background: #6997c1;}
.red {background: #bc5252;}
.yellow {background: #bfa94f;}
.green {background: #4ba962;}        

HTML


<div class="wrapper">    
    <div class="slide1 grey">Slide 1</div>
    <div class="slide blue">Slide 2</div>
    <div class="slide red">Slide 3</div>
    <div class="slide yellow">Slide 4</div>
    <div class="slide green">Slide 5</div>
</div><!-- wrapper -->

Leave a Reply

Your email address will not be published.

Views: 165