Play bxSlider on element hover

Question

I have a wordpress loop loading multiple bxsliders onto one page, i want these sliders to start individually and stop individually on hover of the parent element. I can't figure out how to do so.

Obviously i will need to use a

$('.item').each

But im not sure how to stop and start the bxslider on the hover. Does anyone have a solution?

Here is some sample code:

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

So you can see there im, pulling 3 thumbnails out... in the slider and this is within a post so there could be anywhere between 1 and 10 on the page.

My first idea was to initiate the bxslider on hover....

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

But this doesn't work. How i want it to, i want it to build the slider on each one... then when the user hovers make the slider start... and on mouse off stop.

Thanks in advanced.

Answer 1

You should look through bxSlider API methods here:

The solution is to use .startAuto(); and .stopAuto();:

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

Example: http://jsfiddle.net/verber/KBfx9/28/

For relating the event to sliders parent use this one:

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

If you do not want the initiation for all the sliders on the page, change _this to your exact bxSlider selector.