イメージカルーセルonmouseover data-slide-to

Question

私は、HTMLとPHPを使って書かれた画像カルーセルを持っています。 このカルーセルは、主要カルーセル（bigImgCarousel）とサムネイル（mCustomScrollbar）の2つの部分で構成されています。

カルーセル内の画像のサムネイルを示す「mCustomScrollbar」という名前のサムネイルセクション。ユーザーがサムネイルをクリックすると、メインのカルーセルがクリックされた画像にスライドします。

<li data-target="#carouselCustom" data-slide-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0) { echo 'active'; } ?>"> 
    <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" width="160px" onmouseover="bannerPreview()" /> 
</li> 

どのように私は、ユーザーが特定のサムネイルをマウスオーバーすると、メインカルーセルは、その画像にスライドするように「onmouseover属性」サムネイルアクションのクリックを変えて行くことができます。

$ thumbnailCntは、カルーセル内の特定の画像のスライド番号を指します。

<div id='carouselCustom' class='carousel slide' data-ride='carousel'> 
 
    <div class='carousel-outer'> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class='carousel-inner'> 
 
     <?php $bannerCnt=1; foreach($images as $image) { ?> 
 
     <div id="bigImgCarousel" class="<?php if($bannerCnt == 1) { echo 'active'; } ?> item"> 
 
     <a href="<?php echo $image['url']; ?>"> 
 
      <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$image['banner_path']; ?>" height="585px" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat" onmouseover="bannerPreview()" onmouseout="bannerOffPreview()"/> 
 
     </a> 
 
     </div> 
 
     <?php $bannerCnt++; } ?> 
 

 
     <div id='banner-mouseover-area' style="position: absolute;bottom: 0px; display: none;"> 
 
     <!-- Indicators --> 
 
     <ol class='carousel-indicators mCustomScrollbar'> 
 
      <?php $thumbnailCnt=0; foreach($images as $imageThumb) { ?> 
 
      <li data-target="#carouselCustom" data-slide-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0) { echo 'active'; } ?>"> 
 
       <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" width="160px" onmouseover="bannerPreview()" /> 
 
      </li> 
 
      <?php $thumbnailCnt++; } ?> 
 
     </ol> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

data-slide-to="<?php echo $thumbnailCnt; ?>" 

左と右のボタンは次及び前の画像に移動します。

<!-- Controls --> 
        <!-- Left --> 
        <div id="leftControl" style="position: absolute; margin-top: -20px; left: 20px;" class="tp-leftarrow tparrows default round" data-target="#carouselCustom" data-slide='prev'> 
         <div class="tp-arr-allwrapper"> 
          <div class="tp-arr-iwrapper"> 
           <div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url(&quot;undefined&quot;);"></div> 
           <div class="tp-arr-imgholder2"></div> 
           <div class="tp-arr-titleholder"></div> 
           <div class="tp-arr-subtitleholder"></div> 
          </div> 
         </div> 
        </div> 

        <!-- Right --> 
        <div id="rightControl" style="position: absolute; margin-top: -20px; right: 20px;" class="tp-rightarrow tparrows default round" data-target="#carouselCustom" data-slide='next'> 
         <div class="tp-arr-allwrapper"> 
          <div class="tp-arr-iwrapper"> 
           <div class="tp-arr-imgholder" style="visibility: inherit; opacity: 1; background-image: url(&quot;undefined&quot;);"></div> 
           <div class="tp-arr-imgholder2"></div> 
           <div class="tp-arr-titleholder"></div> 
           <div class="tp-arr-subtitleholder"></div> 
          </div> 
         </div> 
        </div> 

ありがとうございます。

Answer 1

あなたが別の何かに属性名と、このようなJavaScriptでスライド変更してデータを変更することができます。

あなたのPHP：

<li data-target="#carouselCustom" data-change-to="<?php echo $thumbnailCnt; ?>" class="<?php if($thumbnailCnt == 0) { echo 'active'; } ?>"> 
    <img class="img-responsive" src="<?php echo BANNER_PATH.'assets/landing_banner_images/'.$imageThumb['banner_path']; ?>" width="160px" onmouseover="bannerPreview()" /> 
</li> 

JS：

var changeTo; 

$('#carouselCustom .carousel-indicators > [data-target="#carouselCustom"]').mouseover(function() { 
    changeTo = parseInt($(this).attr('data-change-to'), 10); 
    $('#carouselCustom').carousel(changeTo); 
}); 

あなたはまた、防ぐことができますがポインタイベントを変更してサムネイルの数を十分に速く動かすと連続的に変化するスライドslidとのCSSプロパティのイベント：あなたはタッチデバイスをサポートしたい場合は

$('#carouselCustom').on('slide.bs.carousel', function() { 
    $('#carouselCustom .carousel-indicators > [data-target="#carouselCustom"]').css('pointer-events', 'none') 
}); 

$('#carouselCustom').on('slid.bs.carousel', function() { 
    $('#carouselCustom .carousel-indicators > [data-target="#carouselCustom"]').css('pointer-events', 'auto') 
}); 

あなたはtouchendのようなJavaScriptでタッチイベントを使用することができます。