سلام وقت بخیر

من یک کلاس به اینصورت دارم:

<div class="carousel">

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

</div>

و جاوا اسکریپت آن به اینصورت می باشد:

var option = {  

 freeScroll: true,  

 wrapAround: true,

 autoPlay:true,

 rightToLeft:true,

}

const flkty = new Flickity('.carousel', option)

اما مشکلی که دارم به اینصورت است که وقتی بخوام از کلاس کپی و اسمش را تغییر بدم و دو تا داشته باشم به اینصورت:

<div class="carousel">

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

</div>

<div class="carousel2">

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

 <div class="carousel-cell"></div>

</div>

نمیتونم جاوا اسکریپت را به دو تا کلاس بدهم و در این صورت یکی از کلاس ها کار می کند

نمونه کد ها در Codepen :

https://codepen.io/ngoduchieu1996/pen/PoQpLxX