Slideshow CSS background

Question

i am looking for a way for my background image on my CSS to flip through a set of images(3-4).

Whether the solution is through JQuery, CSS or whatever, I am willing to implement it.

I am new to coding, but here is what I have so far.

MY CSS

.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center; 

and my 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! Thanks for your help!

Answer 1

Try something like 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 you have 3 images to slide through
  var image = 'url("' + images[selector] + '")';
  $('.global-header').css('background-image', image);

  setTimeout(setBackground(),3000); //every 3 seconds change the image
}

$(document).ready(function() {
  setTimeout(setBackground(), 3000); //start sliding 3 seconds after the page finished loading
});

Please take care with this solution as it's late over here and I can't test it anymore. There are more elegant solutions for sure.

Answer 2

Here is a solution to image slideshow Add a name to your image tag

 <div class="large-logo-wrap">
        <img src="Assets/Logos/Giadaslogoindexwhitebig.png" name="imgname"/>
  </div>

Then add this script

<script>
var img1=new Image()
// Link to first image
img1.src="http://"
var img2=new Image()
// Link to second image
img2.src="http://"
var img3=new Image()
// Link to third image
img3.src="http://"
var img4=new Image()
// Link to fourth image
img4.src="http://"
var step=1
function slideImages() {
if (!(document.images))
return
// add image name 
document.images.imgname.src=eval("img"+step+".src")
if (step<4)
step++
else
step=1
setTimeout("slideImages()",2000)
}
slideImages()
</script>