draggable slider JavaScript

Content List

Daulat Hussain Profile

Take Quiz

Subscription Form (#3)

How to create draggable slider with JavaScript HTML and CSS

How To Create Draggable Slider With JavaScript code download

Pure Vanilla JavaScript Draggable Slider

Create a draggable slider with JavaScript, Mouse draggable slider JavaScript, Infinity slider JavaScript, horizontal draggable slider JavaScript, and draggable slider CSS HTML and JavaScript.

This project on a draggable slider with the help of JavaScript will help you to increase the fundamental of JavaScript that how its work Under the Hood.

In this project, we have used pure JavaScript to build this draggable slider and HTML CSS for the styling.

Best beginner friendly JavaScript project to build in 2022

This project will increase the understanding that how you can plan your project structure and identify that requirement for building any project such as draggable slider with pure Vanilla JavaScript.

Basic fundamentals of the draggable slider in JavaScript apply to all the designing in front end web development.

JavaScript draggable slider will provide you a better understanding of design concept and add the functionality such as the draggable product, you literally use this concept of the draggable slider to design any type of draggable object whether its product social sharing menu.

React component for draggable sliders

How To Create Draggable Slider With JavaScript HTML and CSS

This JavaScript project for dragging the slider, you can utilize in your react project for angular for building draggable slider on the web application.

Down below we are providing all the source code related to this draggable slider project HTML CSS and JavaScript.

We also made a complete tutorial on this draggable slider JavaScript, so you can watch and code along with us to have a proper understanding.

HTML Code

<div class=”body”>

        <div class=”img”>
            <img src=”logodaulat.png” alt=””>
        </div>
        <div class=”icon”>
            <i class=”uil uil-globe”></i>
            <small>www.daulathussain.com</small>
        </div>
        <div class=”title”><h1>Draggable slider</h1></div>
        <div class=”container”>
            <div class=”cards”>
                <div class=”card”>
                    <i class=”uil uil-facebook-f”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-instagram”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-envelope-minus”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-twitter”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-youtube”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-snapchat-ghost”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-apple”></i>
                </div>
            </div>
        </div>
    </div>

CSS Code

:root {
            –icons-color: #4c5773;
            –icons-bg-color: #e2e6e9;
            –shadow-dark-color: #d3dae7;
            –shadow-light-color: #fff;
            –main-bg-color: #ecf0f3;


            –box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
                -1rem -1rem 1rem var(–shadow-light-color);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
           
        }

        img{
            width: 100%;
            border-radius: 50%;
        }

        .img{
            position: absolute;
            height: 100px;
            width: 100px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 50%;
            margin-top: -31rem;
            margin-left: -70rem;
            display: grid;
            place-items: center;
        }

        .icon{
            position: absolute;
            margin-top: -20rem;
            margin-left: -70rem;
            width: 100px;
            background: var(–main-bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon i{
            font-size: 20px;
            margin-right: 10px;
            color: var(–icons-color);
        }

        .icon small{
            font-size: 15px;
            color: var(–icons-color);
            font-weight: 700;
        }

        .img{
            animation: image 2s infinite linear;
        }

        @keyframes image{
            from {
            transform:rotate(0deg);
        } to {
            transform:rotate(360deg);
        }
        }
       

        .uil {
            cursor: grab;
            font-size: 80px;
        }

        .body {
            background: var(–main-bg-color);
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
        }

        .container {
            width: 900px;
            margin-top: 8rem;
            height: 300px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            position: relative;
            overflow: hidden;
            cursor: grab;
            border-radius: 1rem;


        }

        .cards {
            display: grid;
            grid-template-columns: repeat(7, 290px);
            gap: 1rem;
            top: 18%;
            left: 0;
            position: absolute;
            place-items: center;
            pointer-events: none;
        }

        .card {
            border: 1px solid var(–icons-color);
            border-radius: 1rem;
            padding: 3rem;box-shadow: var(–box-shadow);
        }

        .title{
            position: absolute;
            padding: 2rem 4rem;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            margin-top: -30rem;
            font-size: 25px;
            border-radius: 1rem;
        }

Javascript Code

const container = document.querySelector(‘.container’);
        const cards = document.querySelector(‘.cards’);

        let isPressed = false;
        let positionx;

        container.addEventListener(‘mousedown’, (e) => {
            isPressed = true;
            opsitionx = e.offsetX – cards.offsetLeft;
            container.style.cursor = ‘grabbing’

        })

        container.addEventListener(‘mouseup’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })
        container.addEventListener(‘mouseleave’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })
        container.addEventListener(‘mouseup’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })

        container.addEventListener(‘mousemove’, (e) => {
            if (!isPressed) return;
            e.preventDefault();
            cards.style.left = `${e.offsetX – opsitionx}px`
            moveSlide()
        })

        function moveSlide() {
            const containerRect = container.getBoundingClientRect()
            const cardsRect = cards.getBoundingClientRect()

            if (parseInt(cards.style.left) > 0) {
                cards.style.left = 0;
            }else if(cardsRect.right < containerRect.right){
                cards.style.left = `-${cardsRect.width – containerRect.width}px`;
            }
        }

Health Calculator

Water Calculator by daulat hussain
Water
Fat calculator by daulat hussain
Fat
Protein calculator by daulat hussain
Protein
BMI calculator By daulat hussain
Calories

Download the draggable slider JavaScript source code

Just Wait We Are Preparing The To Download

Download Code

My Services

Daulat hussain social media marketing
Contact Me
Daulat hussain fitness video
Contact Me
Daulat Hussain consultancy for markting
Contact Me
daulat hussain website development tutorial
Contact Me

Recent Post

21 Amazing Daily Hacks for Healthy Life

21 Amazing Daily Hacks for Healthy Life

Read...

5-Minutes Breakfast Recipes For Indian Diet

5-Minutes Breakfast Recipes For Indian

Read...

21 Day Challenge Will Remind You

21 Day Challenge Will Remind You

Read...

4-Week Workout Plan Will Have You Feeling Strong

4-Week Workout Plan Will Feel Strong

Read...

Content List

Daulat Hussain Profile

Take Quiz

Subscription Form (#3)

How to create draggable slider with JavaScript HTML and CSS

How To Create Draggable Slider With JavaScript code download

Pure Vanilla JavaScript Draggable Slider

Create a draggable slider with JavaScript, Mouse draggable slider JavaScript, Infinity slider JavaScript, horizontal draggable slider JavaScript, and draggable slider CSS HTML and JavaScript.

This project on a draggable slider with the help of JavaScript will help you to increase the fundamental of JavaScript that how its work Under the Hood.

In this project, we have used pure JavaScript to build this draggable slider and HTML CSS for the styling.

Best beginner friendly JavaScript project to build in 2022

This project will increase the understanding that how you can plan your project structure and identify that requirement for building any project such as draggable slider with pure Vanilla JavaScript.

Basic fundamentals of the draggable slider in JavaScript apply to all the designing in front end web development.

JavaScript draggable slider will provide you a better understanding of design concept and add the functionality such as the draggable product, you literally use this concept of the draggable slider to design any type of draggable object whether its product social sharing menu.

React component for draggable sliders

How To Create Draggable Slider With JavaScript HTML and CSS

This JavaScript project for dragging the slider, you can utilize in your react project for angular for building draggable slider on the web application.

Down below we are providing all the source code related to this draggable slider project HTML CSS and JavaScript.

We also made a complete tutorial on this draggable slider JavaScript, so you can watch and code along with us to have a proper understanding.

HTML Code

<div class=”body”>

        <div class=”img”>
            <img src=”logodaulat.png” alt=””>
        </div>
        <div class=”icon”>
            <i class=”uil uil-globe”></i>
            <small>www.daulathussain.com</small>
        </div>
        <div class=”title”><h1>Draggable slider</h1></div>
        <div class=”container”>
            <div class=”cards”>
                <div class=”card”>
                    <i class=”uil uil-facebook-f”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-instagram”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-envelope-minus”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-twitter”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-youtube”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-snapchat-ghost”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-apple”></i>
                </div>
            </div>
        </div>
    </div>

CSS Code

:root {
            –icons-color: #4c5773;
            –icons-bg-color: #e2e6e9;
            –shadow-dark-color: #d3dae7;
            –shadow-light-color: #fff;
            –main-bg-color: #ecf0f3;


            –box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
                -1rem -1rem 1rem var(–shadow-light-color);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
           
        }

        img{
            width: 100%;
            border-radius: 50%;
        }

        .img{
            position: absolute;
            height: 100px;
            width: 100px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 50%;
            margin-top: -31rem;
            margin-left: -70rem;
            display: grid;
            place-items: center;
        }

        .icon{
            position: absolute;
            margin-top: -20rem;
            margin-left: -70rem;
            width: 100px;
            background: var(–main-bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon i{
            font-size: 20px;
            margin-right: 10px;
            color: var(–icons-color);
        }

        .icon small{
            font-size: 15px;
            color: var(–icons-color);
            font-weight: 700;
        }

        .img{
            animation: image 2s infinite linear;
        }

        @keyframes image{
            from {
            transform:rotate(0deg);
        } to {
            transform:rotate(360deg);
        }
        }
       

        .uil {
            cursor: grab;
            font-size: 80px;
        }

        .body {
            background: var(–main-bg-color);
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
        }

        .container {
            width: 900px;
            margin-top: 8rem;
            height: 300px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            position: relative;
            overflow: hidden;
            cursor: grab;
            border-radius: 1rem;


        }

        .cards {
            display: grid;
            grid-template-columns: repeat(7, 290px);
            gap: 1rem;
            top: 18%;
            left: 0;
            position: absolute;
            place-items: center;
            pointer-events: none;
        }

        .card {
            border: 1px solid var(–icons-color);
            border-radius: 1rem;
            padding: 3rem;box-shadow: var(–box-shadow);
        }

        .title{
            position: absolute;
            padding: 2rem 4rem;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            margin-top: -30rem;
            font-size: 25px;
            border-radius: 1rem;
        }

Javascript Code

const container = document.querySelector(‘.container’);
        const cards = document.querySelector(‘.cards’);

        let isPressed = false;
        let positionx;

        container.addEventListener(‘mousedown’, (e) => {
            isPressed = true;
            opsitionx = e.offsetX – cards.offsetLeft;
            container.style.cursor = ‘grabbing’

        })

        container.addEventListener(‘mouseup’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })
        container.addEventListener(‘mouseleave’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })
        container.addEventListener(‘mouseup’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })

        container.addEventListener(‘mousemove’, (e) => {
            if (!isPressed) return;
            e.preventDefault();
            cards.style.left = `${e.offsetX – opsitionx}px`
            moveSlide()
        })

        function moveSlide() {
            const containerRect = container.getBoundingClientRect()
            const cardsRect = cards.getBoundingClientRect()

            if (parseInt(cards.style.left) > 0) {
                cards.style.left = 0;
            }else if(cardsRect.right < containerRect.right){
                cards.style.left = `-${cardsRect.width – containerRect.width}px`;
            }
        }

Health Calculator

Water Calculator by daulat hussain
Water
Fat calculator by daulat hussain
Fat
Protein calculator by daulat hussain
Protein
BMI calculator By daulat hussain
Calories

Download the draggable slider JavaScript source code

Just Wait We Are Preparing The To Download

Download Code

My Services

Daulat hussain social media marketing
Contact Me
Daulat hussain fitness video
Contact Me
Daulat Hussain consultancy for markting
Contact Me
daulat hussain website development tutorial
Contact Me

Recent Post

21 Amazing Daily Hacks for Healthy Life

21 Amazing Daily Hacks for Healthy Life

Read...

5-Minutes Breakfast Recipes For Indian Diet

5-Minutes Breakfast Recipes For Indian

Read...

21 Day Challenge Will Remind You

21 Day Challenge Will Remind You

Read...

4-Week Workout Plan Will Have You Feeling Strong

4-Week Workout Plan Will Feel Strong

Read...

Daulat Hussain projects

JavaScript Slider Code

Daulat Hussain Profile

Welcome

Take Quiz

How to create a draggable slider with JavaScript HTML and CSS

How To Create Draggable Slider With JavaScript code download

Create a draggable slider with JavaScript, Mouse draggable slider JavaScript, Infinity slider JavaScript, horizontal draggable slider JavaScript, and draggable slider CSS HTML and JavaScript.

This project on a draggable slider with the help of JavaScript will help you to increase the fundamental of JavaScript that how its work Under the Hood.

In this project, we have used pure JavaScript to build this draggable slider and HTML CSS for the styling.

HEALTH CALCULATOR

Water Calculator by daulat hussain
Water
Fat calculator by daulat hussain
Fat
Protein calculator by daulat hussain
Protein
BMI calculator By daulat hussain
Calories

Best beginner-friendly JavaScript project to build in 2022

How To Create Draggable Slider With JavaScript HTML and CSS

This project will increase the understanding that how you can plan your project structure and identify that requirement for building any project such as draggable slider with pure Vanilla JavaScript.

Basic fundamentals of the draggable slider in JavaScript apply to all the designing in front end web development.

JavaScript draggable slider will provide you a better understanding of design concept and add the functionality such as the draggable product, you literally use this concept of the draggable slider to design any type of draggable object whether its product social sharing menu.

React component for draggable sliders

This JavaScript project for dragging the slider, you can utilize in your react project for angular for building draggable slider on the web application.

Down below we are providing all the source code related to this draggable slider project HTML CSS and JavaScript.

Pure Vanilla JavaScript Draggable Slider

We also made a complete tutorial on this draggable slider JavaScript, so you can watch and code along with us to have a proper understanding.

HTML Code

<div class=”body”>

        <div class=”img”>
            <img src=”logodaulat.png” alt=””>
        </div>
        <div class=”icon”>
            <i class=”uil uil-globe”></i>
            <small>www.daulathussain.com</small>
        </div>
        <div class=”title”><h1>Draggable slider</h1></div>
        <div class=”container”>
            <div class=”cards”>
                <div class=”card”>
                    <i class=”uil uil-facebook-f”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-instagram”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-envelope-minus”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-twitter”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-youtube”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-snapchat-ghost”></i>
                </div>
                <div class=”card”>
                    <i class=”uil uil-apple”></i>
                </div>
            </div>
        </div>
    </div>

CSS Code

 :root {
            –icons-color: #4c5773;
            –icons-bg-color: #e2e6e9;
            –shadow-dark-color: #d3dae7;
            –shadow-light-color: #fff;
            –main-bg-color: #ecf0f3;


            –box-shadow: 1rem 1rem 1rem var(–shadow-dark-color),
                -1rem -1rem 1rem var(–shadow-light-color);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
           
        }

        img{
            width: 100%;
            border-radius: 50%;
        }

        .img{
            position: absolute;
            height: 100px;
            width: 100px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            border-radius: 50%;
            margin-top: -31rem;
            margin-left: -70rem;
            display: grid;
            place-items: center;
        }

        .icon{
            position: absolute;
            margin-top: -20rem;
            margin-left: -70rem;
            width: 100px;
            background: var(–main-bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .icon i{
            font-size: 20px;
            margin-right: 10px;
            color: var(–icons-color);
        }

        .icon small{
            font-size: 15px;
            color: var(–icons-color);
            font-weight: 700;
        }

        .img{
            animation: image 2s infinite linear;
        }

        @keyframes image{
            from {
            transform:rotate(0deg);
        } to {
            transform:rotate(360deg);
        }
        }
       

        .uil {
            cursor: grab;
            font-size: 80px;
        }

        .body {
            background: var(–main-bg-color);
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
        }

        .container {
            width: 900px;
            margin-top: 8rem;
            height: 300px;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            position: relative;
            overflow: hidden;
            cursor: grab;
            border-radius: 1rem;


        }

        .cards {
            display: grid;
            grid-template-columns: repeat(7, 290px);
            gap: 1rem;
            top: 18%;
            left: 0;
            position: absolute;
            place-items: center;
            pointer-events: none;
        }

        .card {
            border: 1px solid var(–icons-color);
            border-radius: 1rem;
            padding: 3rem;box-shadow: var(–box-shadow);
        }

        .title{
            position: absolute;
            padding: 2rem 4rem;
            background: var(–main-bg-color);
            box-shadow: var(–box-shadow);
            margin-top: -30rem;
            font-size: 25px;
            border-radius: 1rem;
        }

Javascript Code

const container = document.querySelector(‘.container’);
        const cards = document.querySelector(‘.cards’);

        let isPressed = false;
        let positionx;

        container.addEventListener(‘mousedown’, (e) => {
            isPressed = true;
            opsitionx = e.offsetX – cards.offsetLeft;
            container.style.cursor = ‘grabbing’

        })

        container.addEventListener(‘mouseup’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })
        container.addEventListener(‘mouseleave’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })
        container.addEventListener(‘mouseup’, (e) => {
            isPressed = false;
            container.style.cursor = “grab”
        })

        container.addEventListener(‘mousemove’, (e) => {
            if (!isPressed) return;
            e.preventDefault();
            cards.style.left = `${e.offsetX – opsitionx}px`
            moveSlide()
        })

        function moveSlide() {
            const containerRect = container.getBoundingClientRect()
            const cardsRect = cards.getBoundingClientRect()

            if (parseInt(cards.style.left) > 0) {
                cards.style.left = 0;
            }else if(cardsRect.right < containerRect.right){
                cards.style.left = `-${cardsRect.width – containerRect.width}px`;
            }
        }

Just Wait We Are Preparing The To Download

Download Code

Recent Post

21 Amazing Daily Hacks for Healthy Life

21 Amazing Daily Hacks for Healthy

Read...

5-Minutes Breakfast Recipes For Indian Diet

5-Minutes Breakfast Recipes For Indian

Read...

21 Day Challenge Will Remind You

21 Day Challenge Will Remind You

Read...

4-Week Workout Plan Will Have You Feeling Strong

4-Week Workout Plan Will Feel

Read...

HTML, CSS & JAVASCRIPT

Daulat Hussain JavaScript Tutorial
Let's Learn

JavaScript is the world’s most popular programming language. JavaScript is the programming language of the Web

Website development project by daulat hussain
Let's Learn

Develop Your Understanding While building HTML, CSS & JavaScript Projects. Find All The Project Source Code.

My Services

Daulat hussain social media marketing
Contact Me
Daulat hussain fitness video
Contact Me
Daulat Hussain consultancy for markting
Contact Me
daulat hussain website development tutorial
Contact Me