Метод getElementsbyclassname Проблема ⇐ CSS

[Anonymous]

Facing a problem in moving the card
im use this function to scroll the card item by two button next and prev
it work with me but when i duplicate card item under the first one it does not work with the second card list ,can any one help me
how can i use this function with many card list
here is my full code

Код: Выделить всё

let left_btn=document.getElementsByClassName('bi-chevron-left')[0];
let right_btn=document.getElementsByClassName('bi-chevron-right')[0];
let cards=document.getElementsByClassName('cards')[0];

left_btn.addEventListener('click',()=>{

cards.scrollLeft -=140;
})

right_btn.addEventListener('click',()=>{

cards.scrollLeft +=140;
})< /code>
section{

position: relative;
width: 100%;
height: auto;
padding: 0px 30px;
bottom: 10px;
color: white;
margin-bottom: 40px;

}

section .movie-list-title{

margin-top: 10px;
}

section .cards{

position: relative;

width: 100%;
height: 350px;
/* border: 1px solid white; */

display: flex;
align-items: center;
overflow-x: auto;
scroll-behavior:smooth ;

}

section .cards .card{

position: relative;
min-width: 200px;
height: 280px;
/* border: 1px solid white; */
border-radius: 10px;
margin-right: 30px;
background: transparent;
transition: .3s linear ;

}

section .bi-chevron-left , .bi-chevron-right{

position: absolute;
top: 50%;
left: 3%;
width: 25px;
height: 25px;
background: gray;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 12px;
cursor: pointer;
transition: .3s linear;
z-index: 999999999;
opacity: 0;

}

section .bi-chevron-right{

left: unset;
right: 3%;
}

section:hover .bi-chevron-left{

opacity: 1;
}

section:hover .bi-chevron-right{

opacity: 1;
}

section .cards::-webkit-scrollbar{

display: none;
}

section .cards .card:hover .poster{

transform: scale(1.1);

}

section .cards .card .poster{

width: 100%;
height: 100%;
border-radius: 12px;
position: relative;
transition: all .5s ease-in-out;
/* margin-left: 20px; */

}< /code>







[*]        href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap"
rel="stylesheet">





 onc







ONC

[list]

Home
[*]Movies
[*]series
[*]popular
[*]trends

[/list]





[url=#]
[i]" alt="" class="poster">
[/url]





  





 Movies Today
[/i]
[i][/i]





[url=#]
[img]../image/

Подробнее здесь: [url]https://stackoverflow.com/questions/79637172/method-getelementsbyclassname-issue[/url]