在元素懸停上播放bxSlider

Question

我有一個wordpress循環將多個bxsliders加載到一個頁面上，我希望這些滑塊單獨啓動並單獨停止父元素的懸停。我無法弄清楚如何去做。

很明顯，我將需要使用

$('.item').each 

但林不知道如何停止和啓動上懸停的bxslider。有沒有人有辦法解決嗎？

下面是一些示例代碼：

if (have_posts()) while (have_posts()) : the_post(); 
      ?> 
       <div class="item"> 
          <div class="thumbnail clearfix"> 
           <ul> 
            <li><?php if (has_post_thumbnail()) : // Check if Thumbnail exists ?> 
             <h1 title="<?php the_title(); ?>" > 
              <a href="<?php the_field('website_url'); ?>"><?php the_post_thumbnail(); ?></a> 
             </h1> 
             <?php endif; ?> 
            </li> 
            <li> 
             <div> 
             <?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?> 
             </div> 
            </li> 
            <li> 
             <div> 
             <?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'third-image'); endif; ?> 
             </div> 
            </li> 
           </ul> 
          </div> 
        </div> 
<?php endwhile; ?> 

所以，你可以看到有IM，拉動3頁的縮略圖了...在滑塊，這是一個後內，從而有可能在1到10之間的任何位置這一頁。

我的第一個想法是啓動bxslider懸停....

$('.item').each(function(){ 
    $(this).hover({ 
     $(this).find('.thumbnail ul').bxSlider({ 
      auto: true 
     }); 
    }); 
}); 

但是，這是行不通的。我想如何，我希望它在每一個建立滑塊...然後當用戶徘徊使滑塊開始...和鼠標停止停止。

謝謝先進。

Answer 1

你應該看看通過bxSlider API方法here：

的解決方案是使用.startAuto();和.stopAuto();：

$('.bxSlider').each(function() { 
    var _this = $(this).bxSlider({ 
     auto: false, 
     speed: 200, 
     pause: 500 
    }); 
    _this.mouseenter(function() { 
     _this.startAuto();  
    }).mouseleave(function() { 
     _this.stopAuto(); 
    }); 
}); 

例子：http://jsfiddle.net/verber/KBfx9/28/

對於事件與滑塊父母使用這一個：

 $('.yourParentParent').mouseenter(function() { 
     _this.startAuto();  
    }).mouseleave(function() { 
     _this.stopAuto(); 
    }); 

如果您不希望啓動頁面上的所有滑塊，請將_this更改爲您的確切bxSlider選擇器。