jquery - Slideshow CSS background -
i looking way background image on css flip through set of images(3-4).
whether solution through jquery, css or whatever, willing implement it.
i new coding, here have far.
my css
.global-header { min-height:600px; background-image: url("assets/bgimages/head_sandwichman.jpg"); background-size: cover; text-align: center;
and html
<header class="container global-header"> <div class="inner-w"> <div class='rmm' data-menu-style = "minimal"> <ul> <li><a href="index.html">home</a></li> <li><a href="menu.html">menu</a></li> <li><a href="findus.html">find us</a></li> <li><a href="about.html">about</a></li> </ul> </div> <div class="large-logo-wrap"> <img src="assets/logos/giadaslogoindexwhitebig.png" /> </div> </div>
cheers! help!
try this:
var counter = 0; var images = ["assets/bgimages/head_sandwichman2.jpg", "assets/bgimages/head_sandwich.jpg", "assets/bgimages/head_pizza.jpg"]; function setbackground(){ counter++; var selector = counter % 3; //assuming have 3 images slide through var image = 'url("' + images[selector] + '")'; $('.global-header').css('background-image', image); settimeout(setbackground(),3000); //every 3 seconds change image } $(document).ready(function() { settimeout(setbackground(), 3000); //start sliding 3 seconds after page finished loading });
please take care solution it's late on here , can't test anymore. there more elegant solutions sure.
Comments
Post a Comment