Author: | bushblade |
---|---|
Views Total: | 1,677 views |
Official Page: | Go to website |
Last Update: | December 19, 2021 |
License: | MIT |
Preview:

Description:
A responsive, fullscreen, touch-enabled slider/swiper implemented in pure JavaScript.
How to use it:
1. Add images as slides to the slider.
<div class="slider-container"> <div class="slide"> <img src="https://source.unsplash.com/qnVXHhUP0xU/1560x979" /> </div> <div class="slide"> <img src="https://source.unsplash.com/C49xQcDfHRs/1560x979" /> </div> <div class="slide"> <img src="https://source.unsplash.com/a-UL8yLaaM0/1560x979" /> </div> <div class="slide"> <img src="https://source.unsplash.com/hlRFJgjJxIk/1560x979" /> </div> <div class="slide"> <img src="https://source.unsplash.com/1HLuNSgKT18/1560x979" alt="" /> </div> </div>
2. The necessary CSS styles for the slider.
.slider-container { height: 100vh; display: inline-flex; scrollbar-width: none; overflow: hidden; scrollbar-width: none; transform: translateX(0); will-change: transform; transition: transform 0.3s ease-out; cursor: grab; } .slide{ max-height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; padding: 1rem; } @media(min-width: 1200px){ .slide { padding: 3rem; } } .slide img{ max-width: 100%; max-height: 100%; transition: transform 0.3s ease-in-out; box-shadow: 5px 5px 50px -1px rgba(0, 0, 0.8); border-radius: 4px; } .grabbing { cursor: grabbing; } .grabbing .slide img{ transform: scale(0.9); box-shadow: 5px 5px 40px -1px rgba(0, 0, 0.8); }
3. Include the main script app.js
on the page.
<script src="app.js"></script>
4. Or insert the following JS snippets into your JS.
const slider = document.querySelector('.slider-container'), slides = Array.from(document.querySelectorAll('.slide')) let isDragging = false, startPos = 0, currentTranslate = 0, prevTranslate = 0, animationID, currentIndex = 0 slides.forEach((slide, index) => { const slideImage = slide.querySelector('img') // disable default image drag slideImage.addEventListener('dragstart', (e) => e.preventDefault()) // touch events slide.addEventListener('touchstart', touchStart(index)) slide.addEventListener('touchend', touchEnd) slide.addEventListener('touchmove', touchMove) // mouse events slide.addEventListener('mousedown', touchStart(index)) slide.addEventListener('mouseup', touchEnd) slide.addEventListener('mousemove', touchMove) slide.addEventListener('mouseleave', touchEnd) }) // make responsive to viewport changes window.addEventListener('resize', setPositionByIndex) // prevent menu popup on long press window.oncontextmenu = function (event) { event.preventDefault() event.stopPropagation() return false } function getPositionX(event) { return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX } function touchStart(index) { return function (event) { currentIndex = index startPos = getPositionX(event) isDragging = true animationID = requestAnimationFrame(animation) slider.classList.add('grabbing') } } function touchMove(event) { if (isDragging) { const currentPosition = getPositionX(event) currentTranslate = prevTranslate + currentPosition - startPos } } function touchEnd() { cancelAnimationFrame(animationID) isDragging = false const movedBy = currentTranslate - prevTranslate // if moved enough negative then snap to next slide if there is one if (movedBy < -100 && currentIndex < slides.length - 1) currentIndex += 1 // if moved enough positive then snap to previous slide if there is one if (movedBy > 100 && currentIndex > 0) currentIndex -= 1 setPositionByIndex() slider.classList.remove('grabbing') } function animation() { setSliderPosition() if (isDragging) requestAnimationFrame(animation) } function setPositionByIndex() { currentTranslate = currentIndex * -window.innerWidth prevTranslate = currentTranslate setSliderPosition() } function setSliderPosition() { slider.style.transform = `translateX(${currentTranslate}px)` }
Changelog:
12/19/2022
- use pointer events