slide json

anovsiradj

by Anov Siradj

HTML

<div class="avz-slide-container">
    <div class="avz-slide">
        <!--img class="avz-slide-img" src="http://www.1x1px.me/0099ff-0.4.png"/-->
    </div>
</div>

CSS

.avz-slide-container {
    width:100%;
    min-height:200px;
    position:relative;
    background-color:red;
    -overflow:hidden;
}
.avz-slide-container .avz-slide {
    position:absolute;
    background-color:yellow;
    top:0px;bottom:0px;
    left:0px;right:0px;
    opacity:0;
}
.avz-slide-container .avz-slide .avz-slide-img {
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

JavaScript

var jdata = [
    {
        "gbr":"http://placehold.it/350x150&text=Slide+1",
        "basetxt":"Lorem Ipsum"
    },
    {
        "gbr":"http://placehold.it/350x150&text=Slide+2",
        "basetxt":"Lorem Ipsum",
        "pretxt":"industry"
    },
    {
        "gbr":"http://placehold.it/350x150&text=Slide+3",
        "basetxt":"Lorem Ipsum",
        "pascatxt":"tagline"
    }
];
var options = {
    index:0,
    delay:2000,
    transp:"http://www.1x1px.me/0099ff-0.4.png"
}
$(document).ready(function(){
/*    $(".avz-slide-container").each(function(){
        var index = 0;
        var offset = imgdata.length;
        var delay = 2000;
        var transp = "http://www.1x1px.me/0099ff-0.4.png";
        var wrap = $(this).children(".avz-slide");
        var imag = wrap.children(".avz-slide-img");
        wrap.html("<>");
    });
*/
    avzSlide(jdata,options);
});
function avzSlide(jdata,optios) {
    $(".avz-slide-container").each(function(){
        var wrap = $(this).children(".avz-slide");
        //var imag = wrap.children(".avz-slide-img");
        var imag = "<img src=\""+options.transp+"\" style=\"background-image:url('"+jdata[options.index].gbr+"');\" class=\"avz-slide-img\"/>";
        wrap.html(imag)
            .fadeTo('slow',1)
            .delay(3500)
            .fadeTo('slow',0).after(function(){
                if(optios.index < jdata.length) {
                    optios.index++;
                } else {
                    optios.index = 0;
                }
                avzSlide(jdata,options);
        });
    });
}