I placed the jquery script below in my layout.cshtml for it to display different background images but nothing happens. Please advise what am I missing. Thank you. Note: the paths of the images are correct.
<script>
$(document).ready(function(){
var header = $('body');
var backgrounds = new Array(
'url(~/Content/images/bgImage-1.jpg)'
, 'url(~/Content/images/bgImage-2.jpg)'
, 'url(~/Content/images/bgImage-3.jpg)'
, 'url(~/Content/images/bgImage-4.jpg)'
, 'url(~/Content/images/bgImage-5.jpg)'
);
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 1000);
header.css('background-image', backgrounds[0]);
});
</script>