Add a scrolling animation to a product slider ( scrollBy js) - slick.js

Question

I made a product slider using Html Css JS and I want the scrollby left and right goes smoth instead of going directly.
Here is my website it works fine on the first slider but the second slider and third that have this issue
Html
<!-- Container for the layout of the full carousel -->
<div class="container2 cover2">
<div class=" scrolling-wrapper scrollmenu-SLIDER2 scroll-images2">
<div class="card2">
<a href=" https://ma.santemagasin.com/produit/hemoconfort/">
<div class="card-img2">
<img src=" https://ma.santemagasin.com/wp-content/uploads/2022/10/hemo-confort-compr.webp">
<h5 class="Product-Disc"> مكمل طبيعي لراحة البواسير
علاج مضمون من المصدر للبواسير الداخلية
حل نهائي للنزيف والالم</h5>
<p class="Product-Prix"> 249د.م.
</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/iron-hair/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/iron-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي خاص بالرجال
sante magasinمن
حل لتساقط الشعر
ملء فراغات اللحية
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/vitex/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/vtx-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي من كف مريم
للنساء ٬ الدورة الشهرية
الحمل ٬ 60 كبسولة نباتية
صنع مغربي٬ 300 ملغرام
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/perfecto/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/prfrcto-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي
لزيادة المناطق الأنثوية
بدون أضرار جانبية
مستخلصات طبيعية
60 كبسولة٬ 300 ملغرام
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/hair-lit/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/hair-lit-300x300.webp">
<h5 class="Product-Disc">
للنساء الشعر والاضافر
تركيبة مطورة ٬ مكمل طبيعي
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/strong-carti/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/strong-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي من
sante magasin
حل للسياتيك والروماتيزم
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/pure-skin/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/pure-skin-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي
من sante magasin
بشرة صافية خالية
من الشوائب والبثور
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/maca/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/maca-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي
من sante magasin
كبسولات جذور الماكا
الطبيعية - العضوية
محفز الطاقة والقوة
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/collagen-complex/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2021/11/collagine-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي
من sante magasin
كولاجين بحري
تركيبة طبيعية
60 كبسولة نباتية
</h5>
<p class="Product-Prix">199 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/control-cholesterol/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/bio-cholesto-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي
من sante magasin
كوليسترول متوازن
محاربة الدهون الثلاثية
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/bio-oral-complement-alimentaire/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/bio-oral-300x300.webp">
<h5 class="Product-Disc">
مكمل لصحة الفم
حل طبيعي من المصدر
الرائحة الكريهة٫ اللثة
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/ibs-active-complement-alimentaire/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/ibs-300x300.webp">
<h5 class="Product-Disc">
مستخلصات طبيعية
300 ملغرام - 60 كبسولة
راحة الجهاز الهضمي
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/saw-palmetto/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/palmetto-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي
من sante magasin
للرجال - صحة البروستاتا
مستخلصات طبيعية
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
<div class="card2">
<a href="https://ma.santemagasin.com/produit/zen-stress/">
<div class="card-img2">
<img src="https://ma.santemagasin.com/wp-content/uploads/2022/09/zen-strees-300x300.webp">
<h5 class="Product-Disc">
مكمل طبيعي مغربي
من sante magasin
نوم مريح - حل للتوتر العصبي
60 كبسولة نباتية
</h5>
<p class="Product-Prix">249 د.م.</p>
<span class="Stars">&bigstar;&bigstar;&bigstar;&bigstar;&bigstar;</span>
</div>
</a>
</div>
</div>
</div>
<div class="cover2">
<button class="left" onclick="leftScroll2()">❮</button>
<button class="right" onclick="rightScroll2()">❯</button>
</div>
CSS
.cover2 {
padding: 0px 30px;
position: relative;
}
.left {
position: absolute;
right: -20px;
top:-170PX;
background-color: transparent !important;
color: #006f07 !important;
font-size: 20px;
font-weight: bold;
border-color: grey;
border-radius: 20%;
}
.right:hover {
background-color: #006F07 !important;
color: white !important;
}
.left:hover {
background-color: #006F07 !important;
color: white !important;
}
.right {
position: absolute;
left: -20px;
top:-170PX;
background-color: transparent !important;
color: #006f07 !important;
font-size: 20px;
font-weight: bold;
border-color: grey;
border-radius: 20%;
margin-left :-10px;
}
.scrollmenu-SLIDER2 {
width: 100%;
height: auto;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.container2 {
display: flex;
overflow-x: auto;
}
.card2 {
padding: 10px;
margin: 10px;
border-radius: 20px;
line-height: 1.2;
background-color: white;
text-align: center;
}
.card2 img{
border-radius: 10px;
}
.Product-Prix{
text-decoration:none;
color : #006f07;
font-size: 20;
font-weight: bold;
margin:5px !important;
}
.Product-Disc{
color: #789FD6;
font-size: 15px;
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
padding-top: 5px;
margin: auto;
width: 100%;
}
.scroll-images {
width: 100%;
height: auto;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.Stars{
display: flex;
justify-content: center;
color: orange;
letter-spacing: 0.5px;
font-size: 20px;
}
.card-img2 {
width: 09rem;
}
::-webkit-scrollbar {
display: NONE;
}
#media only screen and (max-width: 800px) {
.card-img2 {
width: 07rem;
}
.card-img3 {
width: 10rem;
}
.left , .right {
display:none;
}
.cover2{
padding: 0px 5px;
position: relative;
}
JS
<script>
function leftScroll2() {
const left = document.querySelector(".scroll-images2");
left.scrollBy(2000, 0) ;
}
function rightScroll2() {
const right = document.querySelector(".scroll-images2");
right.scrollBy(-2000, 0) ;
}
</script>
I tried give different classes for every element than the first slider but the same problem still stop the slider from going smoothly