CODEWITHSUNDEEP
javascriptjquerypluginsnivo-slider
coderunner
coderunner

Reputation: 935

Dynamically updating the nivo slider parameters

We want to update the nivo slider dynamically for transition type,pause time etc.We are calling a function on click event of a link.This is the function:

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);
}

This is the click event for calling the above function

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

This is the default slideshow function in the nivo-slider.js file.

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: We are neither able to update the parameters dynamically nor do we get any error for it.It works on load of the file(i.e first time).Not sure what is the mistake or we are doing it totally wrong.Please suggest a solution for it.

Upvotes: 0

Views: 1214

Answers (1)

kidwon
kidwon

Reputation: 4524

Just destroy the node before initializing the slider and substitute it.

//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({
      ...
   }   
}

Upvotes: 2

Related Questions