Search found 1 match for snippet

Demo

Source

HTML

Code:

<div id="zzSlide">
    <div class="zzContent">
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/xcv11.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.21</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cfb10.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.20d</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1136.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.19c</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/cv_bmp10.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.19b</div>
        </div>
        <div class="zzItem">
            <div class="zzImage" style="background-image:url(http://i72.servimg.com/u/f72/16/18/15/10/untit250.jpg)"></div>
            <div class="zzCaption">Divide and Fight 2.18e</div>
        </div>
    </div>
    <div class="zzBullets"></div>
</div>

CSS

Code:

#zzSlide {
    margin: 0 auto;
    width: 235px;
}
#zzSlide > div.zzContent {
    position: relative;
    width: inherit;
    height: 200px;
}
#zzSlide div.zzItem {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
}
#zzSlide div.zzImage {
    background: none no-repeat center center/100% 100% #333;
    height: 155px;
    width: inherit;
    border: 5px solid #FFF;
    outline: 1px solid #DDD
}
#zzSlide div.zzCaption {
    background: #FFF;
    padding: 5px 0;
}
#zzSlide > div.zzBullets {
    text-align: center;
}
#zzSlide .zzBullet {
    display: none;
}
#zzSlide .zzBullet + label {
    width: 7px;
    height: 7px;
    outline: 1px solid #DDD;
    background: #FFF;
    display: inline-block;
    outline-offset: 2px;
    margin: 0 7px;
    cursor: pointer;
}
#zzSlide .zzBullet:checked + label {
    background: #666;
}

Javascript

Code:

/*!
  zzSlide v0.2.0
  A Simple jQuery Slideshow
  Copyleft (c) 2014+ Zzbaivong
  http://devs.forumvi.com  
*/
var zzSlide = {
    start: function() {
        zzSlide.run = setInterval(function() {
            zzSlide.current++;
            zzSlide.current == zzSlide.size && (zzSlide.current = 0);
            $("#zzSlide .zzItem").fadeOut('slow');
            $("#zzSlide .zzItem").eq(zzSlide.current).fadeIn('slow');
            $("#zzSlide .zzBullet").eq(zzSlide.current).prop("checked", true);
        }, 3000);
    },
    current: 0,
    size: $("#zzSlide .zzItem").length,
    run: "",
    init: function() {
        $("#zzSlide .zzItem").each(function(index) {
            $(this).attr({
                "data-bullet": index
            });
            $("#zzSlide .zzBullets").append('<input type="radio" class="zzBullet" name="zzbullet" value="' + index + '" id="zzbullet' + index + '" /><label for="zzbullet' + index + '"></label></div>');
        });
        $("#zzSlide .zzItem:gt(0)").hide();
        $("#zzSlide .zzBullet:eq(0)").prop("checked", true);
        zzSlide.start();
        $("#zzSlide").hover(function() {
            clearInterval(zzSlide.run);
        }, function() {
            zzSlide.start();
        });
        $("#zzSlide .zzBullet").on("change", function() {
            $("#zzSlide .zzItem").fadeOut(1E3);
            $("#zzSlide .zzItem[data-bullet='" + this.value + "']").fadeIn('slow');
            zzSlide.current = this.value;
        });
    }
};
$(function() {
    zzSlide.init();
});