Skip to content

Instantly share code, notes, and snippets.

@bpierre

bpierre/index.html

Created Aug 23, 2012
Embed
What would you like to do?
Mini Slider: zero dependencies, IE8+.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mini slider</title>
<link rel="stylesheet" href="mini-slider.css">
</head>
<body>
<div id="slider">
<!-- The previous button is inserted here -->
<div> <!-- The container -->
<ul> <!-- The sliding element -->
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
<li>#5</li>
<li>#6</li>
<li>#7</li>
<li>#8</li>
<li>#9</li>
<li>#10</li>
<li>#11</li>
<li>#12</li>
</ul>
</div>
<!-- The next button is inserted here -->
</div>
<script src="mini-slider.js"></script>
<script>
var sliderElement = document.querySelector('#slider div'),
sliderItems = sliderElement.querySelectorAll('li');
MiniSlider.init(sliderElement, sliderItems, {eltCount: 3});
</script>
</body>
</html>
#slider {
width: 950px;
margin: 100px auto;
}
#slider button {
float: left;
width: 100px;
height: 200px;
font-size: 16px;
cursor: pointer;
}
#slider button[disabled] {
cursor: default;
}
#slider div {
float: left;
overflow: hidden;
width: 750px;
height: 200px;
}
#slider ul {
position: relative;
left: 0;
margin: 0;
padding: 0;
list-style: none;
-webkit-transition: 300ms ease left;
-moz-transition: 300ms ease left;
-o-transition: 300ms ease left;
-ms-transition: 300ms ease left;
transition: 300ms ease left;
}
#slider li {
float: left;
width: 250px;
font: 20px/200px sans-serif;
text-align: center;
color: #fff;
background: #000;
}
#slider li:nth-child(even) {
background: #f00;
}
(function(window) {
var MiniSlider,
document = window.document;
// IE8
function eltChild(elt) {
var child;
if (!(child = elt.firstElementChild)) {
child = elt.children[0];
while (child.nodeType !== 1) {
child = child.nextSibling;
}
}
return child;
}
MiniSlider = function(container, elements, params) {
var self = this,
containerWidth = 0;
self.eltCount = params.eltCount || 6;
self.container = container;
self.elements = elements;
self.steps = self.elements.length;
self.left = self.insertButton('before', 'Previous', 'prev');
self.right = self.insertButton('after', 'Next', 'next');
self.step = 0;
for (var i = 0; i < self.elements.length; ++i) {
var elt = self.elements[i];
containerWidth += elt.offsetWidth + (parseInt(elt.style.marginLeft, 10) || 0);
}
eltChild(self.container).style.width = containerWidth + 'px';
self.left.onclick = function(){ self.move.call(self, 'left'); };
self.right.onclick = function(){ self.move.call(self, 'right'); };
self.updateButtons();
};
MiniSlider.prototype.updateButtons = function() {
this.left.disabled = this.step < 1;
this.right.disabled = this.step + this.eltCount >= this.steps;
};
MiniSlider.prototype.insertButton = function(position, label, id) {
var button = document.createElement('button');
button.className = 'slider-btn ' + id;
button.innerHTML = label;
if (position === 'before') {
this.container.parentNode.insertBefore(button, this.container);
} else {
this.container.parentNode.appendChild(button);
}
return button;
};
MiniSlider.prototype.move = function(direction) {
var stepElt, leftPos = 0, parentRect, rect;
if (direction === 'left' && this.step > 0) {
this.step -= (this.eltCount);
} else if (direction === 'right' && this.step < this.steps) {
this.step += (this.eltCount);
}
stepElt = this.elements.item(this.step);
parentRect = stepElt.parentNode.getBoundingClientRect();
rect = stepElt.getBoundingClientRect();
if (stepElt) {
leftPos = -(rect.left - parentRect.left) - (parseInt(stepElt.style.marginLeft, 10) || 0);
eltChild(this.container).style.left = leftPos + 'px';
}
this.updateButtons();
};
MiniSlider.init = function(container, elements, params) {
var slider = new MiniSlider(container, elements, params);
if (slider.container.length) {
return slider;
}
};
window.MiniSlider = MiniSlider;
}(this));
@carbguif

This comment has been minimized.

Copy link

@carbguif carbguif commented Jun 26, 2013

Hello, how could add an AUTO PLAY function?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment