Draggable Slider in JavaScript

Draggable Slider in JavaScript

Some website section require the slider with the dragging capability so here is it.

This slider has dragging/swipping functionality with the manual controls.

The code using html css and very simple javascript easy to understand.

Note: for the images, I am using Unsplash photos.

Watch Video Tutorial

https://youtu.be/eNpFl6ch2oI

Live Preview.!

Slide-1

Slide-2

Slide-3

Slide-4

Slide-5

Slide-6

Slide-7

Slide-8

<<

>>

HTML Code

<div class="slider">		
    <div class="slides">
        <div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=1" />
            <h2>Slide-1</h2>
        </div>
        <div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=2" />
            <h2>Slide-2</h2>
        </div>
        <div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=3" />
            <h2>Slide-3</h2>
        </div>
        <div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=4" />
            <h2>Slide-4</h2>
        </div>
        <div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=5" />
            <h2>Slide-5</h2>
        </div>
        <div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=6" />
            <h2>Slide-6</h2>
        </div><div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=7" />
            <h2>Slide-7</h2>
        </div>
        <div class="slide">
            <img src="https://source.unsplash.com/random/300x300?sig=8" />
            <h2>Slide-8</h2>
        </div>
    </div>
    <div class="controls">
        <div class="left"><<</div>
        <div class="right">>></div>
    </div>
</div>

CSS Code

.slider{
    --height: 280px;
    --paddingBlock: 15px;
    width: 1000px;
    height: var(--height);
    padding-block: var(--paddingBlock);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
.slides{
    height: var(--height);
    display: grid;
    grid-auto-columns: 300px;
    grid-auto-flow: column;
    grid-gap: 10px;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    pointer-events: none;
    padding-inline:  55px;
}
.slide{
    background-color: #fff;
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
    overflow: hidden;
}
.slide img{
    width: 100%;
    height: 200px;
    aspect-ratio:  9 /16;
    object-fit: cover;
}
.slide h3{
    font-size: 20px;
    color:  rgba(0,0,0,0.5);
    padding: 10px 20px;
}
.controls{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.controls :is(.left, .right){
    font-size: 40px;
    color: rgba(0, 0, 0, 0.1);
    width: 50px;
    height: calc(var(--height) - 2px);
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: 0.3s ease;
}
.left{
    left: 0;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.right{
    right: 0;
    border-right: 1px solid rgba(0,0,0,0.1);
}
.controls :is(.left, .right):hover{
    color: rgba(0,0,0,0.5);
    background-color: rgba(255,255,255,0.5);
}

JavaScript Code

let container = document.querySelector('.slider');
let slides = document.querySelector('.slides');
const left = document.querySelector('.left');
const right = document.querySelector('.right');

let isPressed = false;
var xPosition;

container.addEventListener('mousedown', (e)=>{
    isPressed = true;
    e.preventDefault();
    container.style.cursor = 'grabbing';
    xPosition = `${e.offsetX - slides.offsetLeft}`;

})

window.addEventListener('mouseup', ()=>{
    isPressed = false;
    container.style.cursor = 'grab';
})

container.addEventListener('mouseenter', ()=>{
    container.style.cursor = 'grab';
})

container.addEventListener('mouseleave', ()=>{
    slides.style.cursor = 'normal';
})

container.addEventListener('mousemove', (e)=>{
    if(!isPressed) return;
    e.preventDefault();
    slides.style.left = `${e.offsetX - xPosition}px`;
    getBounding();
})

function getBounding(){

    let container_x = container.getBoundingClientRect();
    let slides_x = slides.getBoundingClientRect();

    if (parseInt(slides.style.left) > 0) {
        slides.style.left = 0;
    }
    else if(slides_x.right < container_x.right){
        slides.style.left = `-${slides_x.width - container_x.width}px`;
    }
    console.log(slides_x.left)			
}
right.addEventListener('click', function(){
    isPressed = false;
    slides.style.left = `-${slides.children[slides.children.length-1].getBoundingClientRect().width * (slides.children.length-3) + 80}px`;
    slides.style.transition = '0.3s ease';
});
left.addEventListener('click', function(){
    isPressed = false;
    slides.style.left = '0px';
    slides.style.transition = '0.3s ease';
});

Animated Logo 3D Box

HTML and CSS Preloader

Simple Calculator using HTML CSS and JavaScript

Random Winner Picker System in JavaScript

Quote Maker UI Design in Adobe XD