Draggable Card Slider

rsbypi4

New member
I'm trying to create draggable car slider, but my problem is during viewing my site into mobile size my draggable car slider not working properly,
and here my code.

index.html
HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Draggable Card Slider</title>

        <!-- Style CSS -->
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <h1>Draggable Card Slider</h1>
        <div class="container">
            <div class="cards">
                <div class="card">
                    <img src="./imgs/cat1.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 1</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat2.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 2</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat3.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 3</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat4.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 4</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat5.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 5</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat6.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 6</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Script JS -->
        <script src="./script.js"></script>
    </body>
</html>

style.css
CSS:
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    min-height: 97vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body > h1 {
    margin-bottom: 30px;
    color: #4e4e4e;
    font-size: 40px;
}

/* global */
img {
    width: 100%;
}

.container h1 {
    margin: 0.5rem 0;
}

/* container and cards */
.container {
    position: relative;
    width: 1000px;
    height: 400px;
    overflow: hidden;
    cursor: grab;
}

.cards {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, 300px);
    grid-gap: 50px;
    pointer-events: none;
}

.card {
    border: 1px solid #ccc;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}

.card__content {
    color: #4e4e4e;
    padding: 1rem;
}

script.js
JavaScript:
const container = document.querySelector(".container");
const cards = document.querySelector(".cards");

/* keep track of user's mouse down and up */
let isPressedDown = false;
/* x horizontal space of cursor from inner container */
let cursorXSpace;

container.addEventListener("mousedown", (e) => {
    isPressedDown = true;
    cursorXSpace = e.offsetX - cards.offsetLeft;
    container.style.cursor = "grabbing";
});

container.addEventListener("mouseup", () => {
    container.style.cursor = "grab";
});

window.addEventListener("mouseup", () => {
    isPressedDown = false;
});

container.addEventListener("mousemove", (e) => {
    if (!isPressedDown) return;
    e.preventDefault();
    cards.style.left = `${e.offsetX - cursorXSpace}px`;
    boundCards();
});

function boundCards() {
    const container_rect = container.getBoundingClientRect();
    const cards_rect = cards.getBoundingClientRect();

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

I am beginner building a dynamic website and I don't know what is wrong in my code.
If you want to test my code, I have a running code here. Please visit this link.
 
I'm trying to create draggable car slider, but my problem is during viewing my site into mobile size my draggable car slider not working properly,
and here my code.

index.html
HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Draggable Card Slider</title>

        <!-- Style CSS -->
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <h1>Draggable Card Slider</h1>
        <div class="container">
            <div class="cards">
                <div class="card">
                    <img src="./imgs/cat1.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 1</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat2.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 2</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat3.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 3</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat4.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 4</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat5.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 5</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
                <div class="card">
                    <img src="./imgs/cat6.jpg" alt="" />
                    <div class="card__content">
                        <h1>Heading 6</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, voluptatibus!
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Script JS -->
        <script src="./script.js"></script>
    </body>
</html>

style.css
CSS:
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    min-height: 97vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body > h1 {
    margin-bottom: 30px;
    color: #4e4e4e;
    font-size: 40px;
}

/* global */
img {
    width: 100%;
}

.container h1 {
    margin: 0.5rem 0;
}

/* container and cards */
.container {
    position: relative;
    width: 1000px;
    height: 400px;
    overflow: hidden;
    cursor: grab;
}

.cards {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, 300px);
    grid-gap: 50px;
    pointer-events: none;
}

.card {
    border: 1px solid #ccc;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}

.card__content {
    color: #4e4e4e;
    padding: 1rem;
}

script.js
JavaScript:
const container = document.querySelector(".container");
const cards = document.querySelector(".cards");

/* keep track of user's mouse down and up */
let isPressedDown = false;
/* x horizontal space of cursor from inner container */
let cursorXSpace;

container.addEventListener("mousedown", (e) => {
    isPressedDown = true;
    cursorXSpace = e.offsetX - cards.offsetLeft;
    container.style.cursor = "grabbing";
});

container.addEventListener("mouseup", () => {
    container.style.cursor = "grab";
});

window.addEventListener("mouseup", () => {
    isPressedDown = false;
});

container.addEventListener("mousemove", (e) => {
    if (!isPressedDown) return;
    e.preventDefault();
    cards.style.left = `${e.offsetX - cursorXSpace}px`;
    boundCards();
});

function boundCards() {
    const container_rect = container.getBoundingClientRect();
    const cards_rect = cards.getBoundingClientRect();

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

I am beginner building a dynamic website and I don't know what is wrong in my code.
If you want to test my code, I have a running code here. Please visit this link.
Mobile devices primarily rely on touch events rather than mouse events. Your code only listens for mousedown, mouseup, and mousemove events, which do not translate to touch interactions on mobile devices.
You need to add touch event listeners to handle touch interactions. This will allow the slider to function on both desktop and mobile devices.

Example:
Code:
const startDrag = (e) => {   
 isPressedDown = true;    
cursorXSpace = e.offsetX - cards.offsetLeft;    
container.style.cursor = "grabbing";
};
const endDrag = () => {    
container.style.cursor = "grab";   
 isPressedDown = false;
};
const drag = (e) => {    
if (!isPressedDown) return;    
e.preventDefault();    c
ards.style.left = `${e.offsetX - cursorXSpace}px`;    
boundCards();
};

// Touch events
container.addEventListener("touchstart", (e) => {  
startDrag(e.touches[0]);});
container.addEventListener("touchend", endDrag);
container.addEventListener("touchmove", (e) => {  
drag(e.touches[0]);
});

Hope this helps to at least guide you in the right direction.
 
Mobile devices primarily rely on touch events rather than mouse events. Your code only listens for mousedown, mouseup, and mousemove events, which do not translate to touch interactions on mobile devices.
You need to add touch event listeners to handle touch interactions. This will allow the slider to function on both desktop and mobile devices.

Example:
Code:
const startDrag = (e) => {  
 isPressedDown = true;   
cursorXSpace = e.offsetX - cards.offsetLeft;   
container.style.cursor = "grabbing";
};
const endDrag = () => {   
container.style.cursor = "grab";  
 isPressedDown = false;
};
const drag = (e) => {   
if (!isPressedDown) return;   
e.preventDefault();    c
ards.style.left = `${e.offsetX - cursorXSpace}px`;   
boundCards();
};

// Touch events
container.addEventListener("touchstart", (e) => { 
startDrag(e.touches[0]);});
container.addEventListener("touchend", endDrag);
container.addEventListener("touchmove", (e) => { 
drag(e.touches[0]);
});

Hope this helps to at least guide you in the right direction.
Good day Moorcam, I try to copy and paste your code to my script.js file, But the output is the same sir, still not working properly during mobile view.
 
Good day Moorcam, I try to copy and paste your code to my script.js file, But the output is the same sir, still not working properly during mobile view.
Here. Replace your current JS with this:
Code:
const container = document.querySelector(".container");
const cards = document.querySelector(".cards");

/* Keep track of user's mouse down and up */
let isPressedDown = false;
/* X horizontal space of cursor from inner container */
let cursorXSpace;

// Mouse event handlers
const startDrag = (e) => {   
    isPressedDown = true;    
    cursorXSpace = e.offsetX - cards.offsetLeft;    
    container.style.cursor = "grabbing";
};

const endDrag = () => {    
    container.style.cursor = "grab";   
    isPressedDown = false;
};

const drag = (e) => {    
    if (!isPressedDown) return;    
    e.preventDefault();    
    cards.style.left = `${e.offsetX - cursorXSpace}px`;    
    boundCards();
};

// Touch event handlers
const startTouchDrag = (e) => {
    startDrag(e.touches[0]);
};

const endTouchDrag = () => {
    endDrag();
};

const touchDrag = (e) => {
    drag(e.touches[0]);
};

// Event listeners for mouse events
container.addEventListener("mousedown", startDrag);
container.addEventListener("mouseup", endDrag);
window.addEventListener("mouseup", endDrag);
container.addEventListener("mousemove", drag);

// Event listeners for touch events
container.addEventListener("touchstart", startTouchDrag);
container.addEventListener("touchend", endTouchDrag);
container.addEventListener("touchmove", touchDrag);

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

    if (parseInt(cards.style.left) > 0) {
        cards.style.left = "0px";
    } else if (cardsRect.right < containerRect.right) {
        cards.style.left = `-${cardsRect.width - containerRect.width}px`;
    }
}
The mouse and touch event handlers are encapsulated in their respective functions (startDrag, endDrag, drag, startTouchDrag, endTouchDrag, and touchDrag). This makes it easier to manage and modify the code in the future.
 
Back
Top