Bootstrap carousal：打開點擊圖像

我正在使用Bootstrap 3製作燈箱 - 轉盤 - 模態頁面。到目前爲止，除了一件事情外，一切都進行得很順利：當輪播開始時，它始終始於第一張圖片的圖片，而不是我點擊的圖片。換句話說，如果我點擊圖片1，圖片1會打開，如果我點擊圖片2，圖片1會打開，如果我點擊圖片3，圖片1會打開。之後，旋轉木馬就像它應該的樣子，但我想要的是，當我點擊圖像2時，圖像2打開，如果我點擊圖像3，圖像3打開。Bootstrap carousal：打開點擊圖像

一些代碼：

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

任何建議嗎？

來源

2016-12-03 xpoes

的可能的複製[旋轉木馬上點擊打開圖片]（http://stackoverflow.com/questions/24835391/旋轉木馬與打開圖像點擊） –

您可以使用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>

希望這幫助！

來源

2016-12-03 06:57:10

讚賞，但我有一些工作的地方，只需要找出如何從燈箱內的任何圖像（不只是第一個）開始只允許傳送帶自動啓動的 – xpoes

嘗試這樣的事情。

只需更換下面一行在你的HTML代碼

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

到

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

來源

2016-12-03 07:00:29

.. – xpoes

Bootstrap carousal：打開點擊圖像

回答

相關問題