Как изменить фоновое изображение полного слайдера - bootstrap

Question

Я использую полную загрузку ползунка и хотел бы сохранить все функции, но вместо того, чтобы помещать все изображения в карусель, мне интересно, возможно ли сохранить только одно и только изменить фоновое изображение.

<!-- 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

Я не знаю, почему вы хотите эту функцию, но так как вы просите, я дам вам решение.

С помощью .css() -селектора в jQuery вы можете настроить таргетинг на CSS и изменить его с помощью jQuery.

Вы можете создать массив или переменную, пройти через него с помощью .each(), сохранить эту информацию в другой переменной, а затем позволить jQuery изменить background-image через некоторое время или после действия. Вы можете изменить цвет фона с помощью следующей JQuery:

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

Просто в качестве примера (вы должны выяснить сами, как сделать это с фоновыми-изображениями, как позволить JQuery отображать еще один и т.д.) , Я установил this fiddle. В скрипке у меня есть переменная, которую я разделил на |, и затем я прохожу через .each(). Эта переменная (chunk) позже используется для создания новых div с соответствующим chunk в качестве имени класса.

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 
}); 

Я не хочу, чтобы весь код из вас, так как этот сайт сделан, чтобы помочь друг другу. Я дал вам довольно хороший толчок в правильном направлении, теперь вам просто нужно выяснить, как изменить background-image -property на клик или другое действие.