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
style.css
script.js
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.
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.