Bootstrap 3: second Carousel in Modal не продвигается

Вот демонстрация с 2 ссылками на 2 модальных окна, каждая с карусели изображений. Первая карусель продвигается отлично (как автоматически, так и с элементами управления). Однако вторая карусель не продвигается с индикаторами, с элементами управления или даже автоматически.Bootstrap 3: second Carousel in Modal не продвигается

Кажется, что это может быть проблема закрытия, но я не могу ее найти.

.carousel-caption { 
 
    font-size: 21px; 
 
    font-weight: 300; 
 
    opacity: 0.7; 
 
} 
 
.carousel-inner > .item > img { 
 
    width: 900px; 
 
} 
 
.modal-body { 
 
    padding: 0; 
 
} 
 
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { 
 
    font-size: 60px; 
 
} 
 
#portfolio .portfolio-item { 
 
    right: 0; 
 
    margin: 0 0 15px; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    max-width: 400px; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    background: rgba(254,209,54,.9); 
 
    -webkit-transition: all ease .5s; 
 
    -moz-transition: all ease .5s; 
 
    transition: all ease .5s; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { 
 
    opacity: 1; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    height: 20px; 
 
    margin-top: -12px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    color: #fff; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { 
 
    margin-top: -12px; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, 
 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { 
 
    margin: 0; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-caption { 
 
    margin: 0 auto; 
 
    padding: 25px; 
 
    max-width: 400px; 
 
    text-align: center; 
 
    background-color: #fff; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-caption h4 { 
 
    margin: 0; 
 
    text-transform: none; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-caption p { 
 
    margin: 0; 
 
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 16px; 
 
    font-style: italic; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<!-- Portfolio Grid Section --> 
 
<section class="bg-light-gray" id="portfolio"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12 text-center"> 
 
        <h2 class="section-heading">Photos</h2> 
 

 
        <h3 class="section-subheading text-muted">Click on a 
 
        category to scroll through more images</h3> 
 
       </div> 
 
      </div> 
 

 
      <div class="row"> 
 
       <div class="col-md-3 col-sm-6 portfolio-item"> 
 
        <a class="portfolio-link" data-toggle="modal" href="#livingroom"> 
 
        <div class="portfolio-hover"> 
 
         <div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div> 
 
        </div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a> 
 

 
        <div class="portfolio-caption"> 
 
         <h4>Living Room</h4> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-md-3 col-sm-6 portfolio-item"> 
 
        <a class="portfolio-link" data-toggle="modal" href="#kitchen"> 
 
        <div class="portfolio-hover"> 
 
         <div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div> 
 
        </div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a> 
 

 
        <div class="portfolio-caption"> 
 
         <h4>Kitchen</h4> 
 
        </div> 
 
       </div> 
 
       
 
       
 
       
 
       
 
      
 
      </div> 
 
    </div> 
 
</section> 
 

 
<!-- Living Room --> 
 
<div class="modal fade" id="livingroom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
 
      <h4 class="modal-title" id="gridSystemModalLabel">Living Room</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/900x500" alt="bedroom"> 
 
     <div class="carousel-caption"> 
 
A quiet retreat from the rest of the house. 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="bedroom"> 
 
     <div class="carousel-caption"> 
 
     Warm and cozy, yet large enough for the whole family. 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="bedroom"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
      </div></div> 
 
     </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
    </div><!-- /.modal --> 
 

 

 

 

 
<!-- Kitchen --> 
 

 
<div class="modal fade" id="kitchen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
 
      <h4 class="modal-title" id="gridSystemModalLabel">Kitchen</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
        
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
    
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
      </div></div> 
 
     </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
    </div><!-- /.modal -->

источник

2015-04-24 Tony

Вы используете один и тот же идентификатор для обоих каруселей, так что, когда вы открываете второй элементы управления по-прежнему привязаны к первому. Per the documentation, Если вы используете более одной карусели на одной странице, им нужно иметь уникальные идентификаторы, а атрибуты href для элементов управления левого и правого слайдов должны указывать на эти идентификаторы. Также неплохая идея обновить атрибуты целевых данных слайдов, чтобы также использовать этот идентификатор, но это не требуется из того, что я могу сказать, проверяя все.

.carousel-caption { 
 
    font-size: 21px; 
 
    font-weight: 300; 
 
    opacity: 0.7; 
 
} 
 
.carousel-inner > .item > img { 
 
    width: 900px; 
 
} 
 
.modal-body { 
 
    padding: 0; 
 
} 
 
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { 
 
    font-size: 60px; 
 
} 
 
#portfolio .portfolio-item { 
 
    right: 0; 
 
    margin: 0 0 15px; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    max-width: 400px; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    background: rgba(254,209,54,.9); 
 
    -webkit-transition: all ease .5s; 
 
    -moz-transition: all ease .5s; 
 
    transition: all ease .5s; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover { 
 
    opacity: 1; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content { 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    height: 20px; 
 
    margin-top: -12px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    color: #fff; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i { 
 
    margin-top: -12px; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, 
 
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 { 
 
    margin: 0; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-caption { 
 
    margin: 0 auto; 
 
    padding: 25px; 
 
    max-width: 400px; 
 
    text-align: center; 
 
    background-color: #fff; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-caption h4 { 
 
    margin: 0; 
 
    text-transform: none; 
 
} 
 

 
#portfolio .portfolio-item .portfolio-caption p { 
 
    margin: 0; 
 
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 16px; 
 
    font-style: italic; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<!-- Portfolio Grid Section --> 
 
<section class="bg-light-gray" id="portfolio"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12 text-center"> 
 
        <h2 class="section-heading">Photos</h2> 
 

 
        <h3 class="section-subheading text-muted">Click on a 
 
        category to scroll through more images</h3> 
 
       </div> 
 
      </div> 
 

 
      <div class="row"> 
 
       <div class="col-md-3 col-sm-6 portfolio-item"> 
 
        <a class="portfolio-link" data-toggle="modal" href="#livingroom"> 
 
        <div class="portfolio-hover"> 
 
         <div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div> 
 
        </div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a> 
 

 
        <div class="portfolio-caption"> 
 
         <h4>Living Room</h4> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-md-3 col-sm-6 portfolio-item"> 
 
        <a class="portfolio-link" data-toggle="modal" href="#kitchen"> 
 
        <div class="portfolio-hover"> 
 
         <div class="portfolio-hover-content fa fa-plus fa-3x" style="font-style: italic"></div> 
 
        </div><img alt="" class="img-responsive" src="http://placehold.it/500x500"></a> 
 

 
        <div class="portfolio-caption"> 
 
         <h4>Kitchen</h4> 
 
        </div> 
 
       </div> 
 
       
 
       
 
       
 
       
 
      
 
      </div> 
 
    </div> 
 
</section> 
 

 
<!-- Living Room --> 
 
<div class="modal fade" id="livingroom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
 
      <h4 class="modal-title" id="gridSystemModalLabel">Living Room</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      
 
<div id="carousel-livingroom" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-livingroom" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-livingroom" data-slide-to="1"></li> 
 
    <li data-target="#carousel-livingroom" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/900x500" alt="bedroom"> 
 
     <div class="carousel-caption"> 
 
A quiet retreat from the rest of the house. 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="bedroom"> 
 
     <div class="carousel-caption"> 
 
     Warm and cozy, yet large enough for the whole family. 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="bedroom"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-livingroom" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-livingroom" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
      </div></div> 
 
     </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
    </div><!-- /.modal --> 
 

 

 

 

 
<!-- Kitchen --> 
 

 
<div class="modal fade" id="kitchen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
 
      <h4 class="modal-title" id="gridSystemModalLabel">Kitchen</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
        
 
<div id="carousel-kitchen" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-kitchen" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-kitchen" data-slide-to="1"></li> 
 
    <li data-target="#carousel-kitchen" data-slide-to="2"></li> 
 
    <li data-target="#carousel-kitchen" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
    
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/900x500" alt="kitchen"> 
 
     <div class="carousel-caption"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-kitchen" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-kitchen" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
      </div></div> 
 
     </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
    </div><!-- /.modal -->

Как вы можете видеть в образцах кода и рабочий фрагмент код выше, каждый карусельный теперь имеет уникальный идентификатор, и HREF атрибуты элементов управления для каждой карусели устанавливается для работы с ID карусели, в которой они находятся. Оба модажа открыты, и каждая карусель движется влево и вправо без проблем.

источник

2015-04-24 18:08:30 MattD

Bootstrap 3: second Carousel in Modal не продвигается

ответ

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