Created
August 23, 2012 13:37
-
-
Save bpierre/3436663 to your computer and use it in GitHub Desktop.
Mini Slider: zero dependencies, IE8+.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, how could add an AUTO PLAY function?