Is there any working example of a simple noUiSlider including a play/pause button, or a strategy how I could achieve this?
I've a simple noUiSlider connected to a stack of images. The number of the slider is connected to the index of the image stack to make the image visible.
var currentIndex = 0;
function animation(value, handleElement, slider){
//alert(value);
imgArray[currentIndex].setVisible(false);
currentIndex = Math.floor(value * 45 / 100);
imgArray[currentIndex].setVisible(true);
}
// pane Image Layer slider
function setText( value, handleElement, slider ){
$("#someElement").text( value );
}
$('#html5').noUiSlider({
start: 45,
step: 1,
range: {
'min': 0,
'max': 45,
},
format: wNumb({
decimals: 0
})
});
$("#html5").Link('lower').to(animation);
$("#html5").Link('lower').to(setText);
If I slide the slider back and forward the images change, but now I would like to add a play/pause button.