1

I am using BxSlider for creating a carousel and I have the slider working but i wanted to add a functionality where I need to change the value of an object to false

$(document).ready(function () {
    var slider = $('.bxslider').bxSlider({
        speed: 10000,
        slideWidth: 170,
        slideMargin: 5,
        minSlides: 4,
        maxSlides: 10,
        ticker: true,
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        nextText: '<img src="images/next.png">',
        prevText: '<img src="images/prev.png">'
    });

i want to change the value of ticker to false on hover. I am not sure how to 

$('.className').hover(function () { ///How should I change the value here  });

I have looked at attr() in jQuery but it didn't work

$('.className').hover(function () {
    slider.attr('ticker', false);
});

but i guess it just targets what is outside the BxSlider();

4

3 に答える 3

1

これを行うと、次のように変更できますTicker mode。

// Cache the slider element
var $slider = $('.bxslider');

// Initialize the slider
$slider.bxSlider({
    speed: 10000,
    slideWidth: 170,
    slideMargin: 5,
    minSlides: 4,
    maxSlides: 10,
    ticker: true,
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    nextText: '<img src="images/next.png">',
    prevText: '<img src="images/prev.png">'
});

// On hover change the slider ticker option to false
$('.className').hover(function () {
    $slider.bxSlider({ ticker: false });
});

アップデート

// Initialize the slider
$slider.bxSlider({
    speed: 10000,
    slideWidth: 170,
    slideMargin: 5,
    minSlides: 4,
    maxSlides: 10,
    ticker: true,
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    nextText: '<img src="images/next.png">',
    prevText: '<img src="images/prev.png">',
    tickerHover: true   // true, false - if true ticker will pause on mouseover
});
于 2013-10-24T10:54:47.470 に答える
0

ホバー時にティッカーを一時停止するには、tickerHoverオプションを に設定するだけtrueです。

var slider = $('.bxslider').bxSlider({
        speed:10000,            
        slideWidth: 170,
        slideMargin:5,
        minSlides:4,
        maxSlides:10,           
        ticker:true,
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        nextText: '<img src="images/next.png">',
        prevText: '<img src="images/prev.png">',
        tickerHover : true // <------------------------- here
});
于 2013-10-24T11:02:19.723 に答える
0

これはあなたのために働くでしょう：

$('.className').hover(function () {
      $slider.bxSlider({ ticker: false });
});
于 2013-10-24T10:58:18.200 に答える