i am trying to add multiple sliders but it is not working. Please correct my js code.
What I have tried:
html code
<div class="wrapper">
"left" class="fa-solid fa-angle-left">
<div class="carousel">
<div class="works">
<img src="images/img-1.jpg" alt="img" draggable="false">
<img src="images/img-2.jpg" alt="img" draggable="false">
<img src="images/img-3.jpg" alt="img" draggable="false">
<img src="images/img-4.jpg" alt="img" draggable="false">
<img src="images/img-5.jpg" alt="img" draggable="false">
<img src="images/img-6.jpg" alt="img" draggable="false">
<img src="images/img-7.jpg" alt="img" draggable="false">
<img src="images/img-8.jpg" alt="img" draggable="false">
<img src="images/img-9.jpg" alt="img" draggable="false">
</div>
</div>
^__i id="right" class="fa-solid fa-angle-right">
</div>
css code
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap");
* {
font-family: "Ubuntu", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--blue: #2a2185;
--white: #fff;
--gray: #f5f5f5;
--black1: #222;
--black2: #999;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.container {
position: relative;
width: 100%;
}
.navigation {
position: fixed;
width: 90px;
height: 100%;
background: var(--blue);
border-left: 10px solid var(--blue);
transition: 0.5s;
overflow: hidden;
}
.navigation.active {
width: 80px;
}
.navigation ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.navigation ul li {
position: relative;
width: 100%;
list-style: none;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.navigation ul li:hover,
.navigation ul li.hovered {
background-color: var(--white);
}
.navigation ul li:nth-child(1) {
margin-bottom: 40px;
pointer-events: none;
}
.navigation ul li a {
position: relative;
display: block;
width: 100%;
display: flex;
text-decoration: none;
color: var(--white);
}
.navigation ul li:hover a,
.navigation ul li.hovered a {
color: var(--blue);
}
.navigation ul li a .icon {
position: relative;
display: block;
min-width: 60px;
height: 60px;
line-height: 75px;
text-align: center;
}
.navigation ul li a .icon ion-icon {
font-size: 1.75rem;
}
.navigation ul li a .title {
position: relative;
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-align: start;
white-space: nowrap;
}
.navigation ul li:hover a::before,
.navigation ul li.hovered a::before {
content: "";
position: absolute;
right: 0;
top: -50px;
width: 50px;
height: 50px;
background-color: transparent;
border-radius: 50%;
box-shadow: 35px 35px 0 10px var(--white);
pointer-events: none;
}
.navigation ul li:hover a::after,
.navigation ul li.hovered a::after {
content: "";
position: absolute;
right: 0;
bottom: -50px;
width: 50px;
height: 50px;
background-color: transparent;
border-radius: 50%;
box-shadow: 35px -35px 0 10px var(--white);
pointer-events: none;
}
.main {
position: absolute;
width: calc(100% - 300px);
left: 150px;
min-height: 100vh;
background: var(--white);
transition: 0.5s;
}
.main.active {
width: calc(100% - 80px);
left: 80px;
}
.topbar {
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
cursor: pointer;
}
.search {
position: absolute;
width: 400px;
margin: 0 10px;
}
.search label {
position: relative;
width: 100%;
}
.search label input {
width: 100%;
height: 40px;
border-radius: 40px;
padding: 5px 20px;
padding-left: 30px;
font-size: 18px;
outline: none;
border: 1px solid var(--black2);
}
.search label ion-icon {
position: absolute;
top: 0;
left: 10px;
font-size: 1.2rem;
}
.user {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.user img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 991px) {
.navigation {
left: -300px;
}
.navigation.active {
width: 300px;
left: 0;
}
.main {
width: 100%;
left: 0;
}
.main.active {
left: 300px;
}
.cardBox {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.details {
grid-template-columns: 1fr;
}
.recentOrders {
overflow-x: auto;
}
.status.inProgress {
white-space: nowrap;
}
}
@media (max-width: 480px) {
.cardBox {
grid-template-columns: repeat(1, 1fr);
}
.cardHeader h2 {
font-size: 20px;
}
.user image{
min-width: 40px;
}
.navigation {
width: 100%;
left: -100%;
z-index: 1000;
}
.navigation.active {
width: 100%;
left: 0;
}
.toggle {
}
.main.active .toggle {
color: #fff;
position: fixed;
right: 0;
left: initial;
}
}
js code
const carousel = document.querySelector(".carousel"),
firstImg = carousel.querySelectorAll("img")[0],
arrowIcons = document.querySelectorAll(".wrapper i");
let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
const showHideIcons = () => {
let scrollWidth = carousel.scrollWidth - carousel.clientWidth;
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
}
arrowIcons.forEach(icon => {
icon.addEventListener("click", () => {
let firstImgWidth = firstImg.clientWidth + 14;
carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
setTimeout(() => showHideIcons(), 60);
});
});
const autoSlide = () => {
if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
positionDiff = Math.abs(positionDiff);
let firstImgWidth = firstImg.clientWidth + 14;
let valDifference = firstImgWidth - positionDiff;
if(carousel.scrollLeft > prevScrollLeft) {
return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}
carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}
const dragStart = (e) => {
isDragStart = true;
prevPageX = e.pageX || e.touches[0].pageX;
prevScrollLeft = carousel.scrollLeft;
}
const dragging = (e) => {
if(!isDragStart) return;
e.preventDefault();
isDragging = true;
carousel.classList.add("dragging");
positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
carousel.scrollLeft = prevScrollLeft - positionDiff;
showHideIcons();
}
const dragStop = () => {
isDragStart = false;
carousel.classList.remove("dragging");
if(!isDragging) return;
isDragging = false;
autoSlide();
}
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);
document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);