如何更改完整滑块的背景图像 - bootstrap

Question

I'm using the full slider bootstrap and would like to keep all the features, but instead of putting all images in the Carousel, I wonder if it is possible to keep only one and only change the background-image.

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

Finnaly:

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" **style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"**></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

Answer 1

I don't know why you would want this function, but since you're asking, I'll give you a solution.

With the .css() -selector in jQuery, you can target CSS and change it with jQuery.

You can create an array or variable, loop through it with .each() , store that information in another variable and then let jQuery change the background-image after some time or after an action. You can change the background by using the following jQuery:

$('.classname').css('background-image', 'variable');

Just as an example (you'll have to figure out yourself how to do it with the background-images, how to let jQuery display another one etc), I have set up this fiddle . In the fiddle, I have a variable, which I split on the | and which I then loop through with .each() . This variable ( chunk ) is later used to make some new divs with the respective chunk as a classname.

jQuery

var somestring = "img1|img2|img3",
    separated = somestring.split("|");

$.each(separated, function(index, chunk) {
    $('.test').append('<div class="' + chunk + '">' + chunk + '</div>');
    //This line is purely added to do something with the chunks
});

I didn't want to make the whole code of you, since this site is made to help each other. I gave you a pretty good push to the right direction, you now just have to figure out how to change the background-image -property on a click or other action.