Question

Does anyone have any tips on making a pure JS image slider? I am looking to have it pause after each image and restart after going through all the images. All that I can find are jQuery plugins and I am look to do this with only JS.

Answer 1

i’d go for something like this:

var sliderTool = {
    _totalItems : 0,
    _visibleItems : 6,
    _currentOffset : 0,
    _timeout : null,
    next : function(){
        ...
    },
    prev : function(){
        ...
    },
    play : function(){
        ...
    },
    pause : function(){
        ...
    }
};

as a base.

every time you set timeout, save it into the _timeout field so you can clearTimeout(sliderTool._timeout) whenever you want.
next and prev can contain animations or just a simple image replacement. you can add a separate timeout for animation and for intervals between slides.

you can add an “add()” method to the sliderTool and on window.load or “body onload” add all the images and then run the start() method. you can also dynamically add images after page is loaded

maybe also add init() for autoloading and basic setup.

again, this is a basic draft of a possible solution. once you get running you’ll probably run into more specific questions. Overall, as an approach, i recommend trying to come up with some solution first before asking for a general advice 😉