Bootstrap carousal：打开点击图像

Question

我正在使用Bootstrap 3制作灯箱 - 转盘 - 模态页面。到目前为止，除了一件事情外，一切都进行得很顺利： 当轮播开始时，它始终始于第一张图片的图片，而不是我点击的图片。 换句话说，如果我点击图片1，图片1会打开，如果我点击图片2，图片1会打开，如果我点击图片3，图片1会打开。 之后，旋转木马就像它应该的样子，但我想要的是，当我点击图像2时，图像2打开，如果我点击图像3，图像3打开。

一些代码：

<ul class="cropped-images"> 
    <li class="la active"><a data-content="No 1" href="#lightbox" data-toggle="modal" data-slide-to="0"><img src="images/thumbs/1.jpg" alt="No 1"></a></li> 
    <li class="la"><a data-content="No 2" href="#lightbox" data-toggle="modal" data-slide-to="1"><img src="images/thumbs/2.jpg" alt="No 2"></a></li> 
    <li class="la"> etc... </ul> 

    <div id="lightbox" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 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">&times;</span></button> 
      <h4 class="modal-title">TITLE</h4> 
          </div> 
      <div id="carousel-example-generic" class="carousel slide"> 
      <!-- Wrapper for slides --> 
       <div class="carousel-inner"> 
        <div class="item active"> 
        <img src="images/large/1.jpg" alt="..."> 
        <div class="carousel-caption">One Image</div> 
        </div> 
        <div class="item"> 
        <img src="images/large/2.jpg" alt="..."> 
        <div class="carousel-caption">Another Image</div> 
        </div> 
        ... etc... 
        <!-- Controls --> 
        controls code 
       </div> 
      </div> 
      </div> 
     </div> 

任何建议吗？

Answer 1

您可以使用Bootstrap Carousel创建自己的自定义收藏的东西如图所示，我试过在下面的代码片段显示，请看看：

\t $('.content-holder .thumbnail').each(function(i) { 
 
\t var item = $('<div class="item"></div>'); 
 
\t var itemDiv = $(this).parents('div'); 
 
\t var title = $(this).parent('a').attr("title"); 
 

 
\t item.attr("title", title); 
 
\t $(itemDiv.html()).appendTo(item); 
 
\t item.appendTo('.carousel-inner'); 
 
\t if (i === 0) { // set first item active 
 
\t \t \t item.addClass('active'); 
 
\t } 
 
}); 
 

 
/* activate the carousel */ 
 
$('#modalCarousel').carousel({interval: false}); 
 

 
/* change modal title when slide changes */ 
 
$('#modalCarousel').on('slid.bs.carousel', function() { 
 
\t \t $('.modal-title').html($(this).find('.active').attr("title")); 
 
}); 
 

 
/* when clicking a thumbnail */ 
 
$('.row .thumbnail').click(function(){ 
 
\t \t var idx = $(this).parents('div').index(); 
 
\t \t var id = parseInt(idx); 
 
\t \t $('#myModal').modal('show'); // show the modal 
 
\t \t $('#modalCarousel').carousel(id); // slide carousel to selected 
 
});

.thumbnail { 
 
\t height: 100px; 
 
\t margin: 6px; 
 
} 
 

 
.thumbnail { 
 
\t margin-bottom: 6px; 
 
} 
 

 

 
.carousel-control.left { 
 
\t background-image: none; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 0; 
 
\t width: 25px; 
 
\t height: 100%; 
 
\t transform: translateY(-50%); 
 
} 
 

 
.carousel-control.right { 
 
\t background-image: none; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t right: 0; 
 
\t width: 25px; 
 
\t height: 100%; 
 
\t transform: translateY(-50%); 
 
} 
 

 
.item .thumbnail { 
 
\t margin: 0 auto; 
 
} 
 

 
body { 
 
\t margin: 20px !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
\t 
 
<div class="content-holder"> 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-lg-2 col-sm-3 col-xs-6"> 
 
\t \t \t \t <a href="#"> 
 
\t \t \t \t \t <img class="thumbnail img-responsive" src="http://placehold.it/200x200" alt="" title=""> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-lg-2 col-sm-3 col-xs-6"> 
 
\t \t \t \t <a href="#"> 
 
\t \t \t \t \t <img class="thumbnail img-responsive" src="http://placehold.it/300x300" alt="" title=""> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
<!-- lightbox modal --> 
 
<div class="modal" id="myModal" role="dialog"> 
 
\t <div class="modal-dialog"> 
 
\t \t <div class="modal-content"> 
 
\t \t \t <div class="modal-header"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
\t \t \t \t <h3 class="modal-title">Lightbox</h3> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-body"> 
 
\t \t \t \t <div id="modalCarousel" class="carousel"> 
 
\t \t \t \t \t <div class="carousel-inner"></div> 
 
\t \t \t \t \t <a class="carousel-control left" href="#modalCarousel" data-slide="prev"> 
 
\t \t \t \t \t \t <i class="glyphicon glyphicon-chevron-left"></i> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a class="carousel-control right" href="#modalCarousel" data-slide="next"> 
 
\t \t \t \t \t \t <i class="glyphicon glyphicon-chevron-right"></i> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<!-- end lightbox modal --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

希望这帮助！

Answer 2

尝试这样的事情。

只需更换下面一行在你的HTML代码

<div id="carousel-example-generic" class="carousel slide"> 

到

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">