patternjavascriptMinor

Pure JS Image Slider

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

imagepureslider

Problem

I was just wanting a code review on this image slider I made. I don't have anyone else to give me their opinion on the code I write outside of work.

Is this sloppy? Is it wrong? Is it ineffective? Does it have bad performance?

You can see my repo on the slider here.

deitySlider.js

```
var deitySlider = {

init: function(userDefinedOptions) {
options = userDefinedOptions;
settings.images = document.querySelectorAll(options.slider + " > img");
settings.stages = settings.images.length;
slider = document.getElementById(options.slider.slice(1));

initCaptionElement();
initNavigation();
initHoverEvent();
deitySlider.cycle(); //Load first slide.

setTimerInterval();

function initHoverEvent() {
if(!options.pauseOnHover) return;
slider.addEventListener("mouseover", function() {
clearInterval(settings.interval);
}, false)

slider.addEventListener("mouseout", function() {
if (settings.interval != null)
setTimerInterval();
}, false)
}

function initCaptionElement() {
if (!options.captions) return;
slider.appendChild(document.createElement("div")).className = "deity-captions";
slider.getElementsByClassName('deity-captions')[0].innerHTML += '';
}

function initNavigation() {
if(!options.directionNav) return;
slider.appendChild(document.createElement("div")).className = "deity-directionNav";
slider.getElementsByClassName('deity-directionNav')[0].innerHTML += ''+ options.prevText +''+ options.nextText +'';

slider.getElementsByClassName('deity-prevNav')[0].addEventListener('click', function() {
if(settings.stage > 0) settings.stage -= 2;
else settings.stage = (settings.stages - 2);
deitySlider.cycle("play");
setTimerInterval();

Solution

Your code needed quite a bit of refactoring. You had unnecessary nested functions, globals all over the place, inconsistent selectors, etc.

I took your code and refactored it so that you now only have 1 global, 'DietySlider'. I also completely refactored the structure so that it separates out every function instead of nesting them. The new structure is much easier to maintain and further extend features.

DietySlider.js

'use strict';

    var DietySlider = (function() {
        var _doc = document;
        var slider;

        var options = {
            slider: "#DietySlider",
            pauseTime: 3000,
            transitionTime: 1000,
            directionNav: false,
            pauseOnHover: false,
            captions: false,
            prevText: 'Prev',
            nextText: 'Next',
        };

        var settings = {
            stage: -1, //Starting Image
            stages: null,
            interval: null,
            images: null,
        };

        return {

            init: function(userDefinedOptions) {
                options = userDefinedOptions;
                slider = _doc.querySelector(options.slider);
                settings.images = _doc.querySelectorAll(options.slider + " > img");
                settings.stages = settings.images.length;
                //run init functions
                DietySlider.initCaptionElement();
                DietySlider.initNavigation();
                DietySlider.initHoverEvent();
                DietySlider.cycle(); //Load first slide
                DietySlider.setTimerInterval();
            },

            initCaptionElement: function() {
                if ( 0 == options.captions)
                    return;

                var element = _doc.createElement("div");
                element.className = "deity-captions";
                element.innerHTML = '';
                slider.appendChild(element);
            },

            initNavigation: function() {
                if( 0 == options.directionNav )
                    return;

                var element = _doc.createElement("div");
                element.className = "deity-directionNav";
                element.innerHTML = ''+ options.prevText +''+ options.nextText +'';
                slider.appendChild(element);

                var prevNav = slider.querySelector('.deity-prevNav');
                prevNav.addEventListener('click', function() {
                    settings.stage > 0 ? settings.stage -= 2 : settings.stage = (settings.stages - 2);
                    DietySlider.cycle("play");
                    DietySlider.setTimerInterval();
                }, false);

                var nextNav = slider.querySelector('.deity-nextNav');
                nextNav.addEventListener('click', function() {
                    DietySlider.cycle();
                    DietySlider.setTimerInterval();
                }, false);
            },

            initHoverEvent: function() {
                if( 0 == options.pauseOnHover )
                    return;

                slider.addEventListener("mouseover", function() {
                    clearInterval(settings.interval);
                }, false);

                slider.addEventListener("mouseout", function() {
                    if (settings.interval > null) {
                        DietySlider.setTimerInterval();
                    }
                }, false);
            },

            cycle: function() {
                console.log("cycling stage: " + (settings.stage + 1));

                var cSettings = settings;
                var cOptions = options;

                cSettings.stage = ( cSettings.stage + 1 ) % cSettings.stages;

                for (var i = 0, length = cSettings.stages; i ' + description + '';

                if( title_text != null && title_text != '' && title_text != undefined ) {
                    title_div.innerHTML = title_text + description_text;
                } else {
                    title_div.innerHTML = "";
                }
            },

            setTimerInterval: function() {
                if ( settings.interval > null ) {
                    clearInterval(settings.interval);
                };
                settings.interval = setInterval(DietySlider.cycle, options.pauseTime);
            },

        };
    })();

index.html

```

Deity Slider Demo

// Document ready
(function(){
(function(){var a=setInterval(function(){"complete"===document.readyState?ready(a):!1},16.6666666667)})();
var ready = function(a) {
clearInterval(a);
DietySlider.init({
slider: '#slider_one',
transitionTime: 1000,
pauseTime: 3

Code Snippets

'use strict';

    var DietySlider = (function() {
        var _doc = document;
        var slider;

        var options = {
            slider: "#DietySlider",
            pauseTime: 3000,
            transitionTime: 1000,
            directionNav: false,
            pauseOnHover: false,
            captions: false,
            prevText: 'Prev',
            nextText: 'Next',
        };

        var settings = {
            stage: -1, //Starting Image
            stages: null,
            interval: null,
            images: null,
        };

        return {

            init: function(userDefinedOptions) {
                options = userDefinedOptions;
                slider = _doc.querySelector(options.slider);
                settings.images = _doc.querySelectorAll(options.slider + " > img");
                settings.stages = settings.images.length;
                //run init functions
                DietySlider.initCaptionElement();
                DietySlider.initNavigation();
                DietySlider.initHoverEvent();
                DietySlider.cycle(); //Load first slide
                DietySlider.setTimerInterval();
            },

            initCaptionElement: function() {
                if ( 0 == options.captions)
                    return;

                var element = _doc.createElement("div");
                element.className = "deity-captions";
                element.innerHTML = '<div class="deity-title"></div>';
                slider.appendChild(element);
            },

            initNavigation: function() {
                if( 0 == options.directionNav )
                    return;

                var element = _doc.createElement("div");
                element.className = "deity-directionNav";
                element.innerHTML = '<a class="deity-prevNav">'+ options.prevText +'</a><a class="deity-nextNav">'+ options.nextText +'</a>';
                slider.appendChild(element);

                var prevNav = slider.querySelector('.deity-prevNav');
                prevNav.addEventListener('click', function() {
                    settings.stage > 0 ? settings.stage -= 2 : settings.stage = (settings.stages - 2);
                    DietySlider.cycle("play");
                    DietySlider.setTimerInterval();
                }, false);

                var nextNav = slider.querySelector('.deity-nextNav');
                nextNav.addEventListener('click', function() {
                    DietySlider.cycle();
                    DietySlider.setTimerInterval();
                }, false);
            },

            initHoverEvent: function() {
                if( 0 == options.pauseOnHover )
                    return;

                slider.addEventListener("mouseover", function() {
                    clearInterval(settings.interval);
                }, false);

                slider.addEventListener("mouseout", function() {
                    if (settings.interval > null) {
                        DietySlider.setT

<!DOCTYPE HTML>
<html>
    <head>
    <title>Deity Slider Demo</title>
    <link rel="stylesheet" type="text/css" href="deity-style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="slider_container">
                <div id="slider_one" class="deity-Slider">
                    <img src="slide_1.jpg" title="Experienced" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum libero lacus, feugiat sit amet auctor ut, porttitor quis justo. " />
                    <img src="slide_2.jpg" title="An Idea" description="Cras id metus luctus, tristique nibh eu, cursus nulla. Etiam a neque nec erat fringilla sagittis a vulputate diam. Fusce vulputate mauris condimentum tortor scelerisque, non congue nisl luctus. Sed ac nibh non sapien tristique consectetur sit amet vitae libero. Sed porttitor lobortis pretium. Sed viverra lorem dolor, sit"/>
                    <img src="slide_3.jpg" title="Deity Design" description=" Donec lorem mi, vehicula ut pharetra in, tempus venenatis ante. Donec in dui auctor justo vehicula congue." />
                    <img src="slide_4.jpg" title="Knowledgeable" description="Aliquam erat volutpat. Nullam blandit, mi ac viverra mollis, nibh purus auctor mauris, sed dapibus ante lectus quis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. "/>
                </div>
            </div>
        </div>
        <script src="DietySlider.js"></script>
        <script>
            // Document ready
            (function(){
                (function(){var a=setInterval(function(){"complete"===document.readyState?ready(a):!1},16.6666666667)})();
                var ready = function(a) {
                    clearInterval(a);
                    DietySlider.init({
                        slider: '#slider_one',
                        transitionTime: 1000,
                        pauseTime: 3000,
                        directionNav: true,
                        pauseOnHover: true,
                        captions: true
                    });
                }
            })();
        </script>
    </body>
</html>

Context

StackExchange Code Review Q#54673, answer score: 7

Revisions (0)

No revisions yet.