Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to move center in bxSlider if I click any slider ?

How to move center <li> in bxSlider if I click any slider <li>?

Problem

I have created a slider and I'm using bxSlider in my projects .

Now my requirement is this:

If i click any li in than this li shift to center in slider with animate .

Can you help me? I've tried searching Google but couldn't found any solution .

My code is this

HTML

Js

$(document).ready(function(){
    $('.masterSlider').bxSlider({
        mode: 'horizontal',
        captions: false,
        pager: false,
        minSlides: 5,
        maxSlides: 5,
        moveSlides: 1,
        slideWidth: 100,
        slideMargin: 10
    });

});

Fiddle here

Problem courtesy of: Rohit Azad

Solution

There is a bit of a challenge with this bxSlider plugin in that how it decides to move doesn't make a lot of sense in relation to slide numbers.

You can see your modified fiddle here

Now, on the options page it gives us getSlideCount() and goToSlide(). With that in mind, the question is how to determine the current slide being clicked on. To achieve that I added a data-slide attribute to all of the li elements. Then tossed a listener on the masterSlider element for li's. When an li is clicked, I then get the slide number from the data-slide attribute and adjust it to subtract 2 (that causes centering) and protect against negative numbers. Finally, I call goToSlide with this value.

The plugin, though, will detect if a cloned copy is to the right of the visible screen (in some cases) and scroll you to the right rather rapidly, giving a not-so-pleasant experience, but it does end on the correct slide in the center.

Modified HTML:

  • ...

Modified JS:

var masterSlider;
$(document).ready(function(){
    masterSlider = $('.masterSlider').bxSlider({
        mode: 'horizontal',
        captions: false,
        pager: false,
        minSlides: 5,
        maxSlides: 5,
        moveSlides: 1,
        slideWidth: 100,
        slideMargin: 10
    });
    $('.masterSlider').on('click', 'li', gotoSlide);
});
function gotoSlide() {
    var idx = (parseInt($(this).data('slide')) + masterSlider.getSlideCount() - 2) % masterSlider.getSlideCount();
    masterSlider.goToSlide(idx);
}
Solution courtesy of: Jeremy Miller

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to move center in bxSlider if I click any slider ?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×