Bootstrap旋轉木馬：以動畫方式在旋轉木馬中設置圖像

我有一個附帶縮略圖庫的旋轉木馬。我希望能夠在用戶點擊縮略圖庫中的圖像時在旋轉木馬中設置圖像。我通過將適當的項目設置爲「活動」來實現此目的，但它不使用任何引導轉換，因此圖像突然出現。有什麼方法可以添加幻燈片動畫嗎？Bootstrap旋轉木馬：以動畫方式在旋轉木馬中設置圖像

旋轉木馬（上左）與縮略圖畫廊（右）： enter image description here

的JavaScript

<script type="text/javascript"> 
     // go to image in carousel 
     function setCarousel(carouselID, image){ 
      $('.carousel.'+carouselID+' .item.active').removeClass('active'); 
      $('.carousel.'+carouselID + ' div:nth-child('+image+')').addClass('active'); 
     } 

     // set photo to active in carousel when thumbnail is clicked 
     $('.thumbGallery img').click(function(){ 
      var parent = $(this).attr("data-parent"); 
      var position = parseInt($(this).attr("data-position"))+1; 
      console.log("parent: " + parent); 
      console.log("position: " + position); 

      // slide to the element in the slideshow 
      setCarousel(parent, position); 

     });  
</script>

轉盤HTML：

<div id="detailViewPhoto"> 
     <div class="mainPhoto carousel slide 523" id="carousel-523"> 
      <div class="carousel-inner 523 active"> 
       <div class="item active">  
        <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/2013-06-18_08.25.02.jpg" rel="gallery 523"> 
        <img alt="Preview_2013-06-18_08.25.02" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/preview_2013-06-18_08.25.02.jpg" width="100%"> 
        </a> 
       </div> 
       <div class="item"> 
        <a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/2013-06-18_08.24.07.jpg" rel="gallery 523"> 
        <img alt="Preview_2013-06-18_08.24.07" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/preview_2013-06-18_08.24.07.jpg" width="100%"> 
        </a> 
       </div> 
      </div> 
      <a class="carousel-control left" href="#carousel-523" data-slide="prev" style="display: none;">‹</a> 
      <a class="carousel-control right" href="#carousel-523" data-slide="next" style="display: none;">›</a> 
     </div> 

     <div class="thumbGallery 523"> 
      <img alt="Thumb_2013-06-18_08.25.02" data-parent="523" data-position="0" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/897/thumb_2013-06-18_08.25.02.jpg" style="padding: 4px; border: 1px solid rgb(204, 204, 204); max-width: 85%; cursor: default;"> 
     <img alt="Thumb_2013-06-18_08.24.07" data-parent="523" data-position="1" src="https://buildinprogress.s3.amazonaws.com/image/imagePath/898/thumb_2013-06-18_08.24.07.jpg" style="padding: 4px; border: 1px solid rgb(204, 204, 204); max-width: 85%; cursor: default;"> 
     </div> 

    </div>

來源

2013-07-03 scientiffic

匝這裏有一個默認的輪播方式。它是$（'。carousel'）。carousel（number）其中，number是要循環的項目。衛生署！

來源

2013-07-05 14:31:38 scientiffic

Bootstrap旋轉木馬：以動畫方式在旋轉木馬中設置圖像

回答

相關問題