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 += '<div class="deity-title"></div>';
}
function initNavigation() {
if(!options.directionNav) return;
slider.appendChild(document.createElement("div")).className = "deity-directionNav";
slider.getElementsByClassName('deity-directionNav')[0].innerHTML += '<a class="deity-prevNav">'+ options.prevText +'</a><a class="deity-nextNav">'+ options.nextText +'</a>';
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();
}, false);
slider.getElementsByClassName('deity-nextNav')[0].addEventListener('click', function() {
deitySlider.cycle();
setTimerInterval();
}, false);
}
function setTimerInterval() {
if (settings.interval) { clearInterval(settings.interval) };
settings.interval = setInterval(deitySlider.cycle, options.pauseTime);
};
console.log("\nslider: " + options.slider + "\npauseTime: " + options.pauseTime + "\nTransitionTime: " + options.transitionTime);
console.log(settings.stages);
},
cycle: function() {
console.log("cycle");
var cSettings = settings;
var cOptions = options;
cSettings.stage = ++cSettings.stage % cSettings.stages;
for (var i = 0, length = cSettings.stages; i < length; i++)
cSettings.images[i].classList.add("hidden");
cSettings.images[cSettings.stage].classList.remove("hidden");
if(cOptions.captions)
insertImageCaption();
function insertImageCaption() {
var title_text = cSettings.images[cSettings.stage].getAttribute('title');
var description_text = '<div class="deity-description">' + cSettings.images[cSettings.stage].getAttribute('description') + '</div>';
var title_div = slider.getElementsByClassName('deity-title')[0];
if(title_text != null && title_text != '')
title_div.innerHTML = title_text + description_text;
else title_div.innerHTML = "";
}
}
};
var options = ({
slider: "#deitySlider",
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,
});
var slider;
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="deity-style.css"/>
<title>Deity Slider Demo</title>
</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 type="text/javascript" src="deity.slider.js"></script>
<script>
window.addEventListener("load", function load(){
window.removeEventListener("load", load, false);
deitySlider.init({
slider: '#slider_one',
transitionTime: 1000,
pauseTime: 3000,
directionNav: true,
pauseOnHover: true,
captions: true,
}); },false);
</script>
</body>
</html>
