Несколько twitter Bootstrap Управление каруселей с классом

Я пытаюсь настроить несколько каруселей на одной странице, но я не хочу использовать разные идентификаторы, так как позже я буду создавать их динамически. Моя проблема в том, что, нажимая кнопки в первой карусели, я контролирую их все. Я не могу понять, как правильно обращаться с элементами. Как я могу настроить этот код, чтобы я мог управлять каждой карусели отдельно, используя класс, а не идентификатор?Несколько twitter Bootstrap Управление каруселей с классом

jsfidle: http://jsfiddle.net/RobRalph/shk63x3g/1/

HTML:

<body> 

<!-- 1st carousel test --> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="carousel slide" data-interval="false"> 
      <div class="carousel-inner"> 
       <div class="backview"></div> 
       <ol class="carousel-indicators" > 
        <li data-target = ".carousel" data-slide-to = "0" class="active"></li> 
        <li data-target = ".carousel" data-slide-to = "1"></li> 
        <li data-target = ".carousel" data-slide-to = "2"></li> 
       </ol> 

       <!-- carousel first page --> 
       <div class="item active"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>1</h3> 
         <p>Lorum ipsum</p> 

        </div> 


       </div> 

       <!-- carousel second page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>2</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 

       <!-- carousel third page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>3</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 
      </div> 

      <a class = "carousel-control left" href = ".carousel" data-slide = "prev"> 
      <span class = "icon-prev"></span> 
      </a> 
      <a class = "carousel-control right" href = ".carousel" data-slide = "next"> 
      <span class = "icon-next"></span> 
      </a> 


     </div> 
     </div> 
    </div> 
</div> 

<!-- 2nd carousel test --> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="carousel slide" data-interval="false"> 
      <div class="carousel-inner"> 
       <div class="backview"></div> 
       <ol class="carousel-indicators" > 
        <li data-target = ".carousel" data-slide-to = "0" class="active"></li> 
        <li data-target = ".carousel" data-slide-to = "1"></li> 
        <li data-target = ".carousel" data-slide-to = "2"></li> 

       </ol> 

       <!-- carousel first page --> 

       <div class="item active"> 

        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 


        <div class = "carousel-caption"> 
         <h3>1</h3> 
         <p>Lorum ipsum</p> 

        </div> 


       </div> 

       <!-- carousel second page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>2</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 

       <!-- carousel third page --> 
       <div class="item"> 
        <div class = "headeritem"> 
        </div> 
        <div class = "bodyitem"> 
        </div> 

        <div class = "carousel-caption"> 
         <h3>3</h3> 
         <p>Lorum ipsum</p> 
        </div> 
       </div> 
      </div> 

      <a class = "carousel-control left" href = ".carousel" data-slide = "prev"> 
      <span class = "icon-prev"></span> 
      </a> 
      <a class = "carousel-control right" href = ".carousel" data-slide = "next"> 
      <span class = "icon-next"></span> 
      </a> 
     </div> 
     </div> 
    </div> 
</div>

Дополнительные CSS:

.backview { 
position:absolute; 
top:0; 
z-index:-99; 
height:100%; 
width:100%; 

background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://scontent.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/p480x480/10408976_1175768429116191_8145612220139098697_n.jpg?oh=45022b3bbf32769af5bf339f40cb2cb1&oe=55F527C3') no-repeat center center; 
background-size:cover; 

} 


.headeritem { 
    height:80px;  

} 

.bodyitem { 
    height:140px; 

}

источник

2015-06-22 RobRalph

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

Вот работает Bootply демо с двумя каруселей: http://www.bootply.com/04KMcAK0w4

Вам нужно будет использовать идентификатор в двух местах.

На индикаторов карусели (пули) в качестве значения атрибута данных называется данных-мишень:

<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>

И на кнопки вперед и назад, как значения HREF:

<a class="left carousel-control" href="#myCarousel1" data-slide="prev">

источник

2015-06-22 00:27:14

si это невозможно с классом, если я не изменю bootstrap.js? Я боялся, что он придет к ID, я думаю, мне придется искать, как добавлять конкретные идентификаторы динамически, не должно быть слишком плохо – RobRalph

Несколько twitter Bootstrap Управление каруселей с классом

ответ

Смежные вопросы