<div class="overflow-hidden ecommerce-slider custom-silder-01">
     <ul class="p-0 m-0 mb-2 swiper-wrapper list-inline">
         <li class="swiper-slide card-slide">
             <div> Slide1 </div>
         </li> 
         <li class="swiper-slide card-slide">
             <div>Slide2</div>
          </li>
          <li class="swiper-slide card-slide">
             <div>Slide3</div>
          </li>
          <li class="swiper-slide card-slide">
              <div>Slide4</div>
          </li>
          <li class="swiper-slide card-slide">
              <div>Slide5</div>
          </li>
          <li class="swiper-slide card-slide">
               <div>Slide6</div>
          </li>
          <li class="swiper-slide card-slide">
              <div>Slide7</div>
          </li>
    </ul>
</div> 

if ($('.ecommerce-slider').length > 0) {
    const options = {
        centeredSlides: false,
        loop: false,
        slidesPerView: 4,
        autoplay:false,
        spaceBetween: 32,
        breakpoints: {
            320: { slidesPerView: 1 },
            550: { slidesPerView: 2 },
            991: { slidesPerView: 3 },
            1400: { slidesPerView: 3 },
            1500: { slidesPerView: 3 },
            1920: { slidesPerView: 4 },
            2040: { slidesPerView: 4 },
            2440: { slidesPerView: 4 }
        },
        pagination: {
            el: '.swiper-pagination'
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },  

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar'  
        }
    } 
    let swiper = new Swiper('.ecommerce-slider',options);

    document.addEventListener('ChangeMode', (e) => {
    if (e.detail.rtl === 'rtl' || e.detail.rtl === 'ltr') {
        swiper.destroy(true, true)
        setTimeout(() => {
            swiper = new Swiper('.ecommerce-slider',options);
        }, 500);
    }
    })
}