Background slideshow

HTML

<body>
    <div class="backgroundImage"></div>
    <div class="backgroundImage rotating-text1">
        	<h2>&#8220;start&#8221;</h2>

        <br />&#8212; jQuery background switcher</div>
    <div class="backgroundImage rotating-text2">
        	<h2>First heading</h2>

        <p>Lorem ipsum 1...</p>
    </div>
    <div class="backgroundImage rotating-text3">
        	<h2>Second heading</h2>

        <p>Lorem ipsum 2...</p>
    </div>
    <div class="backgroundImage rotating-text4">
        	<h2>Third heading</h2>

        <p>Lorem ipsum 3...</p>
    </div>
    <div class="imgSwitch">	<a class='imgSwitchLeft'> </a>
	<a class='imgSwitchRight'> </a>

    </div>
</body>

CSS

body {
    color:#fff;
    margin:0;
    padding:0;
}
h2 {
    margin-top:0;
}
.backgroundImage {
    display:block;
    position:absolute;
    z-index: -3;
    min-width:100%;
    min-height:100%;
    background-size:cover;
}
.bg1 {
    background:transparent url('http://abora.mynameisanna.com/wp-content/themes/abora/img/Abora-bg-01.jpg') center center no-repeat;
    background-size:cover;
}
.bg2 {
    background:transparent url('http://abora.mynameisanna.com/wp-content/themes/abora/img/Abora-bg-02.jpg') center center no-repeat;
    background-size:cover;
}
.bg3 {
    background:transparent url('http://abora.mynameisanna.com/wp-content/themes/abora/img/Abora-bg-03.jpg') center center no-repeat;
    background-size:cover;
}
.bg4 {
    background:transparent url('http://abora.mynameisanna.com/wp-content/themes/abora/img/Abora-bg-04.jpg') center center no-repeat;
    background-size:cover;
}
.bg0 {
    background:#2b2b2b url('http://abora.mynameisanna.com/wp-content/themes/abora/img/page-bg.jpg') no-repeat top;
    background-size: 100%, contain;
}
.rotating-text1.bg1, .rotating-text1.bg2, .rotating-text1.bg3, .rotating-text1.bg4, .rotating-text2.bg1, .rotating-text2.bg2, .rotating-text2.bg3, .rotating-text2.bg4, .rotating-text3.bg1, .rotating-text3.bg2, .rotating-text3.bg3, .rotating-text3.bg4, .rotating-text4.bg1, .rotating-text4.bg2, .rotating-text4.bg3, .rotating-text4.bg4 {
    background:none;
    z-index:1;
    position:initial;
    min-width: initial;
    min-height: initial;
}
.rotating-text1.bg1 {
    display:block!important;
}
.rotating-text1.bg2 {
    display:none!important;
}
.rotating-text1.bg3 {
    display:none!important;
}
.rotating-text1.bg4 {
    display:none!important;
}
.rotating-text2.bg1 {
    display:none!important;
}
.rotating-text2.bg2 {
    display:block!important;
}
.rotating-text2.bg3 {
    display:none!important;
}
.rotating-text2.bg4 {
    display:none!important;
}
.rotating-text3.bg1 {
   ...

JavaScript

var timer;
$(document).ready(function () {
    // background image on load
    var numberImages = 4
    var images = [];
    for (var i = 1; i <= numberImages; i++) {
        images.push(i);
    }
    var imgValue = 1
    $('.backgroundImage').addClass('bg' + imgValue + '');

    // Switch background image - forwards
    $('.imgSwitchRight').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 8000);
        if (imgValue < numberImages) {
            imgValue++
        } else {
            imgValue = 1
        }

        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 2000);

    // Switch background - backwards
    $('.imgSwitchLeft').click(function () {
        $('.backgroundImage').each(function (e) {
            $(this).removeClass('bg1 bg2 bg3 bg4').fadeOut(0);
        });
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('.imgSwitchRight').click();
        }, 2000);

        if (imgValue > 1) {
            imgValue--
        } else {
            imgValue = numberImages
        }
        $('.backgroundImage').addClass('bg' + imgValue + '').fadeIn(600);

    });
    clearTimeout(timer);
    timer = setTimeout(function () {
        $('.imgSwitchRight').click();
    }, 2000);
});