Slide 1 Slide 2 Slide 3 Slide 4

Control the slider using the buttons.

Start Stop Goto(3) Destroy

Status: Stopped

var slider = new IdealImageSlider.Slider('#slider');

document.querySelector('.start').addEventListener('click', function(e){
    e.preventDefault();
    // Use the start() API method
    slider.start();
});
document.querySelector('.stop').addEventListener('click', function(e){
    e.preventDefault();
    // Use the stop() API method
    slider.stop();
});
document.querySelector('.prev').addEventListener('click', function(e){
    e.preventDefault();
    // Use the previousSlide() API method
    slider.previousSlide();
});
document.querySelector('.next').addEventListener('click', function(e){
    e.preventDefault();
    // Use the nextSlide() API method
    slider.nextSlide();
});
document.querySelector('.goto').addEventListener('click', function(e){
    e.preventDefault();
    // Use the gotoSlide() API method
    slider.gotoSlide(3);
});
document.querySelector('.destroy').addEventListener('click', function(e){
    e.preventDefault();
    // Use the destroy() API method
    slider.destroy();
});