动态更新nivo滑块参数

Dynamically updating the nivo slider parameters

本文关键字：参数 nivo 更新 动态      更新时间：2023-09-26

我们想要动态更新nivo滑动条的过渡类型，暂停时间等。我们正在调用一个函数的点击事件的链接。下面是函数:

function fnSetPauseTime(navType) {
    var getSec = $('#setSliderTime').val();
    getSec = (getSec) * 1000;
    var sliderId = $('#' + IdParent).children().attr('id');
    $('#' + sliderId).attr('pauseTime', getSec);
    var transType = $('#changeTrans').val();
    //var transType = $('.controlNav').is('checked');
    var getSec = $('#setSliderTime').val();
    slideShow(sliderId, getSec, transType, navType);
}

这是调用上述函数

的click事件
$('.controlNav').click(function () {
    var navType = $(this).val();
    if (navType == 'thumbNav') {
        navType = 'true';
    } else {
        navType = 'false';
    }
    fnSetPauseTime(navType);
    //slideShow(sliderId, '');
});

这是nivo-slider.js文件中默认的幻灯片放映函数。

function slideShow(sliderId, getSec, transType, navType) {
  $('#' + sliderId).nivoSlider({
    effect: 'random',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 3000,
    startSlide: 0,
    directionNav: navType,
    controlNav: navType,
    controlNavThumbs: navType,
    pauseOnHover: true,
    manualAdvance: false,
    prevText: 'Prev',
    nextText: 'Next',
    randomStart: false,
    beforeChange: function () {},
    afterChange: function () {},
    slideshowEnd: function () {},
    lastSlide: function () {},
    afterLoad: function () {}
  });
}

ISSUE:我们既不能动态更新参数，也没有得到任何错误。它在加载文件(i。E第一次)。不确定是什么错了，还是我们做得完全错了。

在初始化滑块之前销毁节点并替换它。

//Save the DOM node before a slider is binded to it
var slider = $('#' + sliderId).clone();
function slideShow(sliderId, getSec, transType, navType) {
   var newSlider = slider.clone(),
   var oldSlider = $('#' + sliderId);
   oldSlider.after(newSlider);
   oldSlider.remove();
   newSlider.nivoSlider({
      ...
   }   
}
相关文章：