Bootstrap - Jumbotron - Automatic image change - jQuery

Question

I am using the Bootstrap Jumbotron and trying to create a jQuery function that automatically cycles through different images in the img folder; currently there are only three slider#.jpg img and the expected behavior would be that after 2 seconds the img in the css is replaced by slider2.jpg and so forth until it returns to slider1.jpg. The problem is that this isn´t happening and the image doesn´t change from slider1 to 2 or 3.

This is my HTML:

    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-md-6 jumbotron-text">
                    <h1>CAMD</h1>
                    <p>Soluciones integrales para el hogar</p>
                    <a href="contact.html" class="btn btn-contact" role="button">CONTACTO</a> 
                </div>
            </div>
        </div>          
    </div>

This is the CSS:

.jumbotron {
    margin-bottom: 0px;
    background-image: url(../img/slider1.jpg);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
}

This is the jQuery:

$(document).ready(function() {
    var imgId = 0
    var numberOfImages = 3;
    setInterval(function() {
    $(".jumbotron").css('background-image','url('../img/slider' + 'imgId' + '.jpg')');;
    imgId = (imgId + 1) % numberOfImages;
  }, 2000);
});

CodingWithSpike CodingWithSpike · Accepted Answer · 2015-08-25T12:32:27

You haven't stated what your problem or error is... However, from a first glance, this line looks wrong:

$(".jumbotron").setInterval(function() {

The setInterval function is not a jQuery function that can be called on a selected element. It is a function on window. I think this line should just be:

setInterval(function() {

or

window.setInterval(function() {

Second, this isn't valid code:

$(".jumbotron").css('background-image','url('../img/slider' + 'imgId' + '.jpg')');;

The quotes are incorrect, and you are trying to add the literal string 'imgId' and not the value of the variable. You probably want:

$(".jumbotron").css('background-image','url("../img/slider' + imgId + '.jpg")');

Bootstrap - Jumbotron - Automatic image change - jQuery

1 Answers