Bildkarussell onmouseover data-slide-to

Question

Ich habe ein Bildkarussell geschrieben mit HTML und PHP. Dieses Bildkarussell besteht aus 2 Teilen - Hauptkarussell (bigImgCarousel) und Thumbnails (mCustomScrollbar).

Die Miniaturansicht mit dem Namen "mCustomScrollbar" zeigt die Miniaturansichten der Bilder im Karussell an. Wenn der Benutzer auf das Vorschaubild klickt, wird das Hauptkarussell zum angeklickten Bild verschoben.

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

Wie kann ich mich über das Klicken von Thumbnail-Aktion Wechsel zu „Onmouseover“, so dass, wenn der Benutzer eine bestimmte Miniaturmouseover, das Hauptkarussel zu diesem Bild gleitet.

Das $ thumbnailCnt bezieht sich auf die Foliennummer des jeweiligen Bildes im Karussell.

data-slide-to="<?php echo $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>

Linke und rechte Taste, um zum nächsten oder vorherigen Bild zu navigieren.

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

Vielen Dank im Voraus.

Answer 1

Sie können Ihre Daten Attributnamen auf etwas anderes, und ändern Sie die Folien in JavaScript wie folgt ändern:

Ihre 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); 
}); 

Sie können auch verhindern, kontinuierliches Wechseln der Folien, wenn Sie schnell über einige Ihrer Thumbnails schweben, indem Sie die CSS-Eigenschaft der Zeigerereignisse auf slid undändernEreignisse:

$('#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') 
}); 

Wenn Sie Touch-Geräte unterstützen möchten Sie Touch-Ereignisse in JavaScript wie touchend verwenden können.