Background Slideshow

KLICKA HÄR FÖR DEMO

http://swedishwebdesign-background-slideshow.blogspot.se/

---------------------- JavaScript ------------------------
Include block of JavaScript just before the </body>
----------------------------------------------------------


<!-- Java script background slideshow -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 8000); // 8 seconds
});
</script>




----------------------- CSS -----------------------
/* Background Slideshow
----------------------------------------------- */

.fadein {
    position:relative;
    width:100%;
}

.fadein img {
    position:absolute;
    left:0;
    top:0;
}



----------------------- HTML -----------------------
Ad before  <div class='body-fauxcolumns'>
----------------------------------------------------

 <div class='fadein'>
        <img src='http://scontent-a.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/10890886_791254760948261_1045185605_n.jpg' style='width: 100%;'/>
        <img src='http://scontent-a.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10655031_295452970642396_983499262_n.jpg' style='width: 100%;'/>
        <img src='http://scontent-b.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/10507929_653979198011356_1726325635_n.jpg' style='width: 100%;'/>
        <img src='http://scontent-a.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/10598651_369149076570516_211590368_n.jpg' style='width: 100%;'/>
        <img src='http://scontent-a.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10624150_951890884836784_219414410_n.jpg' style='width: 100%;'/>
  <img src='http://scontent-a.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10514049_780020505381793_761935214_n.jpg' style='width: 100%;'/>
    </div>

Populära inlägg