Last active
December 30, 2016 19:50
-
-
Save mattborn/26360f214bde5205a9b7219a7b28324e to your computer and use it in GitHub Desktop.
Pure JS Slider
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> | |
| <head> | |
| <title>Pure JS Slider</title> | |
| </head> | |
| <body> | |
| <script src="slider.js"></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
| const frame = document.createElement('div'); | |
| frame.id = 'frame'; | |
| const slider = document.createElement('div'); | |
| slider.id = 'slider'; | |
| frame.appendChild(slider); | |
| const slides = [1,2,3,4,5]; | |
| slides.forEach(function (i) { | |
| const slide = document.createElement('div'); | |
| slide.className = 'slide'; | |
| slide.style.backgroundImage = 'url(http://lorempixel.com/800/600/animals/'+ i +')'; | |
| slider.appendChild(slide); | |
| }); | |
| setSliderWidth(slider); | |
| const prev = document.createElement('button'); | |
| prev.id = 'prev'; | |
| prev.innerText = 'Previous'; | |
| prev.onclick = prevSlide; | |
| frame.appendChild(prev); | |
| const next = document.createElement('button'); | |
| next.id = 'next'; | |
| next.innerText = 'Next'; | |
| next.onclick = nextSlide; | |
| frame.appendChild(next); | |
| document.body.innerHTML = ''; | |
| document.body.appendChild(frame); | |
| const Selectors = { | |
| 'body': { | |
| margin: '0 auto', | |
| maxWidth: '800px', | |
| }, | |
| '#frame': { | |
| height: '50vh', | |
| overflow: 'hidden', | |
| position: 'relative', | |
| }, | |
| '#slider': { | |
| display: 'flex', | |
| height: '100%', | |
| left: 0, | |
| position: 'absolute', | |
| transition: 'left 195ms cubic-bezier(0,0,.2,1)', | |
| }, | |
| '.slide': { | |
| backgroundPosition: 'center', | |
| backgroundSize: 'cover', | |
| flex: 1, | |
| }, | |
| '#prev': { | |
| left: 0, | |
| position: 'absolute', | |
| top: '50%', | |
| transform: 'translateY(-50%)', | |
| }, | |
| '#next': { | |
| position: 'absolute', | |
| right: 0, | |
| top: '50%', | |
| transform: 'translateY(-50%)', | |
| } | |
| }; | |
| function setSliderWidth (slider) { | |
| slider.style.width = 100 * slides.length +'%'; | |
| } | |
| let currentSlide = 0; | |
| setInterval(nextSlide, 2000); | |
| function nextSlide () { | |
| if (currentSlide === (slides.length - 1)) { | |
| currentSlide = 0; | |
| } else { | |
| currentSlide++; | |
| } | |
| animateSlide(); | |
| } | |
| function prevSlide () { | |
| if (currentSlide === 0) { | |
| currentSlide = slides.length - 1; | |
| } else { | |
| currentSlide--; | |
| } | |
| animateSlide(); | |
| } | |
| function animateSlide () { | |
| document.getElementById('slider').style.left = currentSlide * -100 +'%'; | |
| } | |
| window.addEventListener('resize', function () { | |
| setSliderWidth(document.getElementById('slider')); | |
| }); | |
| // document.addEventListener('DOMContentLoaded', function () { | |
| for (Selector in Selectors) { | |
| const nodes = document.querySelectorAll(Selector); | |
| for (let i = 0; i < nodes.length; i++) { | |
| const style = Selectors[Selector]; | |
| for (key in style) { | |
| nodes[i].style[key] = style[key]; | |
| } | |
| } | |
| } | |
| // }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment