A responsive, fullscreen, touch-enabled slider/swiper implemented in pure JavaScript.
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)`
}
Author: bushblade
Demo: https://bushblade-touch-slider.surge.sh/
Source Code: https://github.com/bushblade/Full-Screen-Touch-Slider
#javascript