html - CSS background-image slideshow

Question

I am pretty new to CSS and HTML, but I am learning the ropes. Right now, I have a background image on my header section and I am trying to turn this into a slideshow with 3-4 images shuffling through on a timer.

I have seen some tutorials that use images through HTML, but the way I have set it up is I have my CSS property background-image set as my image.

If this doesnt make sense, here is the CSS

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

and the 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>

Thanks for the help!

Answer 1

Use following

 <script>
//Array of images which you want to show: Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.global-header')
    .css('background-image','url("'+images[nextimage++]+'")')
    .fadeIn(500,function(){
        setTimeout(doSlideshow,1000);
    });
}
</script>