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

import Swiper from '@/components/custom/slider/Swiper.vue'
import SwiperSlider from '@/components/custom/slider/SwiperSlide.vue'
export default {
  name: 'swiper-slider',
  components: {
    Swiper,
    SwiperSlider
  },
  data () {
    return {
      swiper: {},
      slideroptions: {
        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 }
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        scrollbar: {
          el: '.swiper-scrollbar'
        }
      }
    }
  }
}