├── .DS_Store ├── README.md ├── vanilla-js-slider-FINISHED ├── .DS_Store ├── README.md ├── img │ ├── .DS_Store │ ├── slide1_unsplash.jpg │ ├── slide2_unsplash.jpg │ ├── slide3_unsplash.jpg │ ├── slide4_unsplash.jpg │ ├── slide5_unsplash.jpg │ └── slide6_unsplash.jpg ├── src │ └── wbn-slider.js ├── style │ └── style.css └── wbn-slider.html └── vanilla-js-slider-START-HERE ├── .DS_Store ├── README.md ├── img ├── .DS_Store ├── slide1_unsplash.jpg ├── slide2_unsplash.jpg ├── slide3_unsplash.jpg ├── slide4_unsplash.jpg ├── slide5_unsplash.jpg └── slide6_unsplash.jpg ├── src └── wbn-slider.js ├── style └── style.css └── wbn-slider.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slider-Carousel---Lightweight-in-Vanilla-JS-ES6- 2 | A lightweight slider with some ES6 syntax and CSS animations 3 | 4 | There´s too many sliders out there that are great but have to many functions etc. 5 | I decided to do my own lightweight slider that´s independent and written completely in Vanilla JS. 6 | 7 | There´s also many sliders that just fade the images up and down. I wanted a slider carousel that actually slides the images in and out. To accomplish that my approach is to keep track of the nearest two slides in both directions relative to the active slide and apply different animation classes. The classes do the CSS animation either to the left or right of the screen. 8 | 9 | TODO: Implement some kind of navigation dots 10 | 11 | I also tried out using the Flexbox for centering vertical and the "object-fit" in the CSS for covering. 12 | It´s also possible to add an overlay text over the slides and be styled to your own likings. 13 | -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/.DS_Store -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/README.md: -------------------------------------------------------------------------------- 1 | # Slider-Carousel---Lightweight-in-Vanilla-JS-ES6- 2 | A lightweight slider with some ES6 syntax and CSS animations 3 | 4 | There´s too many sliders out there that are great but have to many functions etc. 5 | I decided to do my own lightweight slider that´s independent and written completely in Vanilla JS. 6 | 7 | There´s also many sliders that just fade the images up and down. I wanted a slider carousel that actually slides the images in and out. To accomplish that my approach is to keep track of the nearest two slides in both directions relative to the active slide and apply different animation classes. The classes do the CSS animation either to the left or right of the screen. 8 | 9 | TODO: Implement some kind of navigation dots 10 | 11 | I also tried out using the Flexbox for centering vertical and the "object-fit" in the CSS for covering. 12 | It´s also possible to add an overlay text over the slides and be styled to your own likings. 13 | -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/img/.DS_Store -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/img/slide1_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/img/slide1_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/img/slide2_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/img/slide2_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/img/slide3_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/img/slide3_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/img/slide4_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/img/slide4_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/img/slide5_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/img/slide5_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/img/slide6_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-FINISHED/img/slide6_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/src/wbn-slider.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | // CHANGE ONLY THIS 3 | const SLIDETIME = 500; //ms 4 | // -------------------------- 5 | 6 | const backButton = document.querySelector('.wbn-slider-back-btn'); 7 | const forwardButton = document.querySelector('.wbn-slider-next-btn'); 8 | // Select all slides and convert node to array for easy handling 9 | // const allSlides = Array.from(document.querySelectorAll('.wbn-slide')); 10 | const allSlides = [...document.querySelectorAll('.wbn-slide')]; 11 | let clickable = true; 12 | let active = null; 13 | let newActive = null; 14 | 15 | function initSlider() { 16 | // Set the CSS transition on the slides to the value we specified in SLIDETIME above 17 | allSlides.forEach(slide => 18 | slide.setAttribute( 19 | 'style', 20 | `transition: transform ${SLIDETIME}ms ease; 21 | animation-duration: ${SLIDETIME}ms`, 22 | ), 23 | ); 24 | } 25 | 26 | function changeSlide(forward) { 27 | if (clickable) { 28 | clickable = false; 29 | active = document.querySelector('.active'); 30 | const activeSlideIndex = allSlides.indexOf(active); 31 | 32 | if (forward) { 33 | console.log('activeSlideIndex: ', activeSlideIndex); 34 | console.log('allSlides.length: ', allSlides.length); 35 | console.log('new slide: ', (activeSlideIndex + 1) % allSlides.length); 36 | 37 | newActive = allSlides[(activeSlideIndex + 1) % allSlides.length]; 38 | active.classList.add('slideOutLeft'); 39 | newActive.classList.add('slideInRight', 'active'); 40 | } else { 41 | console.log('activeSlideIndex: ', activeSlideIndex); 42 | console.log('allSlides.length: ', allSlides.length); 43 | console.log('new slide: ', (activeSlideIndex - 1 + allSlides.length) % allSlides.length); 44 | 45 | newActive = 46 | allSlides[ 47 | (activeSlideIndex - 1 + allSlides.length) % allSlides.length 48 | ]; 49 | active.classList.add('slideOutRight'); 50 | newActive.classList.add('slideInLeft', 'active'); 51 | } 52 | } 53 | } 54 | 55 | allSlides.forEach(slide => { 56 | slide.addEventListener('transitionend', e => { 57 | // Check for the old active transition and if clickable is false 58 | // to not trigger it more than once 59 | if (slide === active && !clickable) { 60 | clickable = true; 61 | // Remove all CSS animation classes on old active 62 | active.className = 'wbn-slide'; 63 | } 64 | }); 65 | }); 66 | 67 | //Event listeners 68 | forwardButton.addEventListener('click', () => { 69 | changeSlide(true); 70 | }); 71 | backButton.addEventListener('click', () => { 72 | changeSlide(false); 73 | }); 74 | 75 | // Init the slider 76 | initSlider(); 77 | }); 78 | -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/style/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #wbn-slider { 7 | position: relative; 8 | height: 50vw; 9 | overflow: hidden; 10 | } 11 | 12 | .wbn-slide { 13 | position: absolute; 14 | width: 100%; 15 | z-index: 500; 16 | height: 50vw; 17 | } 18 | 19 | .wbn-slide img { 20 | object-fit: cover; 21 | width: 100%; 22 | pointer-events: none; 23 | } 24 | 25 | .active { 26 | z-index: 1000; 27 | } 28 | 29 | .slideInLeft { 30 | animation-name: animateInLeft; 31 | z-index: 1000; 32 | } 33 | 34 | .slideInRight { 35 | animation-name: animateInRight; 36 | z-index: 1000; 37 | } 38 | 39 | .slideOutLeft { 40 | transform: translateX(-100%); 41 | } 42 | 43 | .slideOutRight { 44 | transform: translateX(100%); 45 | } 46 | 47 | @keyframes animateInLeft { 48 | 0% { 49 | transform: translateX(-100%); 50 | } 51 | 100% { 52 | transform: translateX(0%); 53 | } 54 | } 55 | 56 | @keyframes animateInRight { 57 | 0% { 58 | transform: translateX(100%); 59 | } 60 | 100% { 61 | transform: translateX(0%); 62 | } 63 | } 64 | 65 | .wbn-buttons { 66 | position: absolute; 67 | display: flex; 68 | flex-direction: row; 69 | justify-content: space-between; 70 | align-items: center; 71 | width: 100%; 72 | height: 100%; 73 | z-index: 20000; 74 | } 75 | 76 | .wbn-slider-back-btn, 77 | .wbn-slider-next-btn { 78 | display: flex; 79 | flex-direction: column; 80 | justify-content: center; 81 | align-items: center; 82 | background: #fff; 83 | font-size: 20px; 84 | opacity: 0.7; 85 | border-radius: 50px; 86 | width: 50px; 87 | height: 50px; 88 | transition: all 0.2s; 89 | margin: 20px; 90 | } 91 | 92 | .wbn-slider-back-btn:hover, 93 | .wbn-slider-next-btn:hover { 94 | transform: scale(1.1); 95 | opacity: 0.8; 96 | cursor: pointer; 97 | } 98 | 99 | .wbn-overlay-text { 100 | position: absolute; 101 | display: flex; 102 | display: -ms-flexbox; 103 | display: -webkit-flex; 104 | flex-direction: column; 105 | justify-content: center; 106 | align-items: center; 107 | width: 100%; 108 | height: 100%; 109 | color: white; 110 | top: 0; 111 | left: 0; 112 | z-index: 10000; 113 | opacity: 1; 114 | } 115 | 116 | .wbn-overlay-text .wbn-header { 117 | font-family: 'Chivo', sans-serif; 118 | font-size: 80px; 119 | font-weight: 800; 120 | } 121 | 122 | .wbn-overlay-text .wbn-text { 123 | font-family: Arial, Helvetica, sans-serif; 124 | text-align: center; 125 | font-size: 22px; 126 | line-height: 30px; 127 | color: white; 128 | max-width: 30%; 129 | } 130 | -------------------------------------------------------------------------------- /vanilla-js-slider-FINISHED/wbn-slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hero Slider 6 | 7 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 | HEADER TEST 22 | 23 | Fusce pellentesque dui blandit, tristique lectus id, pulvinar lacus. 24 | Suspendisse potenti. Aliquam in varius magna. Sed eleifend suscipit 25 | eros, non consectetur enim varius quis. Sed semper semper lacus nec 26 | porttitor. 27 | 28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 | ◀ 37 |
38 | 39 |
40 | ▶ 41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/.DS_Store -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/README.md: -------------------------------------------------------------------------------- 1 | # Slider-Carousel---Lightweight-in-Vanilla-JS-ES6- 2 | A lightweight slider with some ES6 syntax and CSS animations 3 | 4 | There´s too many sliders out there that are great but have to many functions etc. 5 | I decided to do my own lightweight slider that´s independent and written completely in Vanilla JS. 6 | 7 | There´s also many sliders that just fade the images up and down. I wanted a slider carousel that actually slides the images in and out. To accomplish that my approach is to keep track of the nearest two slides in both directions relative to the active slide and apply different animation classes. The classes do the CSS animation either to the left or right of the screen. 8 | 9 | TODO: Implement some kind of navigation dots 10 | 11 | I also tried out using the Flexbox for centering vertical and the "object-fit" in the CSS for covering. 12 | It´s also possible to add an overlay text over the slides and be styled to your own likings. 13 | -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/img/.DS_Store -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/img/slide1_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/img/slide1_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/img/slide2_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/img/slide2_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/img/slide3_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/img/slide3_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/img/slide4_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/img/slide4_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/img/slide5_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/img/slide5_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/img/slide6_unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/weibenfalk/vanilla-js-slider-starter-files/f59497e42b2ff7efb995bbeb22dfa567ea04f5d5/vanilla-js-slider-START-HERE/img/slide6_unsplash.jpg -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/src/wbn-slider.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | // START HERE 3 | }); 4 | -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/style/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | #wbn-slider { 7 | position: relative; 8 | height: 50vw; 9 | overflow: hidden; 10 | } 11 | 12 | .wbn-slide { 13 | position: absolute; 14 | width: 100%; 15 | z-index: 500; 16 | height: 50vw; 17 | } 18 | 19 | .wbn-slide img { 20 | object-fit: cover; 21 | width: 100%; 22 | pointer-events: none; 23 | } 24 | 25 | .active { 26 | z-index: 1000; 27 | } 28 | 29 | .slideInLeft { 30 | animation-name: animateInLeft; 31 | z-index: 1000; 32 | } 33 | 34 | .slideInRight { 35 | animation-name: animateInRight; 36 | z-index: 1000; 37 | } 38 | 39 | .slideOutLeft { 40 | transform: translateX(-100%); 41 | } 42 | 43 | .slideOutRight { 44 | transform: translateX(100%); 45 | } 46 | 47 | @keyframes animateInLeft { 48 | 0% { 49 | transform: translateX(-100%); 50 | } 51 | 100% { 52 | transform: translateX(0%); 53 | } 54 | } 55 | 56 | @keyframes animateInRight { 57 | 0% { 58 | transform: translateX(100%); 59 | } 60 | 100% { 61 | transform: translateX(0%); 62 | } 63 | } 64 | 65 | .wbn-buttons { 66 | position: absolute; 67 | display: flex; 68 | flex-direction: row; 69 | justify-content: space-between; 70 | align-items: center; 71 | width: 100%; 72 | height: 100%; 73 | z-index: 20000; 74 | } 75 | 76 | .wbn-slider-back-btn, 77 | .wbn-slider-next-btn { 78 | display: flex; 79 | flex-direction: column; 80 | justify-content: center; 81 | align-items: center; 82 | background: #fff; 83 | font-size: 20px; 84 | opacity: 0.7; 85 | border-radius: 50px; 86 | width: 50px; 87 | height: 50px; 88 | transition: all 0.2s; 89 | margin: 20px; 90 | } 91 | 92 | .wbn-slider-back-btn:hover, 93 | .wbn-slider-next-btn:hover { 94 | transform: scale(1.1); 95 | opacity: 0.8; 96 | cursor: pointer; 97 | } 98 | 99 | .wbn-overlay-text { 100 | position: absolute; 101 | display: flex; 102 | display: -ms-flexbox; 103 | display: -webkit-flex; 104 | flex-direction: column; 105 | justify-content: center; 106 | align-items: center; 107 | width: 100%; 108 | height: 100%; 109 | color: white; 110 | top: 0; 111 | left: 0; 112 | z-index: 10000; 113 | opacity: 1; 114 | } 115 | 116 | .wbn-overlay-text .wbn-header { 117 | font-family: 'Chivo', sans-serif; 118 | font-size: 80px; 119 | font-weight: 800; 120 | } 121 | 122 | .wbn-overlay-text .wbn-text { 123 | font-family: Arial, Helvetica, sans-serif; 124 | text-align: center; 125 | font-size: 22px; 126 | line-height: 30px; 127 | color: white; 128 | max-width: 30%; 129 | } 130 | -------------------------------------------------------------------------------- /vanilla-js-slider-START-HERE/wbn-slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hero Slider 6 | 7 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 | HEADER TEST 22 | 23 | Fusce pellentesque dui blandit, tristique lectus id, pulvinar lacus. 24 | Suspendisse potenti. Aliquam in varius magna. Sed eleifend suscipit 25 | eros, non consectetur enim varius quis. Sed semper semper lacus nec 26 | porttitor. 27 | 28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 | ◀ 37 |
38 | 39 |
40 | ▶ 41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | --------------------------------------------------------------------------------