<template>
    <section class="section-padding">
        <b-container>
            <div class="text-center center">
                <Title :desc="true" sub-title="OUR CLIENTS" title-text="Free Until You're Ready to
            Launch" title-description="Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia
            consequat duis enim velit mollit. Exercitation veniam" />
            </div>
        </b-container>

        <Swiper tag="ul" class="p-0 m-0 list-inline swiper-container swiper-general" :loop="true" :modules="[Autoplay]"
            :breakpoints="{
                0: { slidesPerView: 1, },
                480: { slidesPerView: 1, },
                768: { slidesPerView: 2, },
                1023: { slidesPerView: 6.1, },
                1199: { slidesPerView: 6, },
            }" :autoplay="{ delay: 3000, disableOnInteraction: true }" :space-between="20">
            <swiper-slide v-for="(data, index) in clientImages" :key="index" tag="li">
                <div class="our-client-img bg-light rounded-3 text-center">
                    <img :src="generateImgPath(data.imgSrc)" :alt="data.altText" class="client-img">
                </div>
            </swiper-slide>
            <div class="swiper-pagination"></div>
        </Swiper>
    </section>
</template>

Script

<script setup>
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay } from 'swiper';
  import Title from '@/components/widgets/title.vue';
  const generateImgPath = (path) => {
      return window.origin + import.meta.env.BASE_URL + path;
  };
  const clientImages = [
      { imgSrc: '/assets/images/client/client-1.svg', altText: 'client-1' },
      { imgSrc: '/assets/images/client/client-2.svg', altText: 'client-2' },
      { imgSrc: '/assets/images/client/client-3.svg', altText: 'client-3' },
      { imgSrc: '/assets/images/client/client-1.svg', altText: 'client-4' },
      { imgSrc: '/assets/images/client/client-5.svg', altText: 'client-5' },
      { imgSrc: '/assets/images/client/client-6.svg', altText: 'client-6' },
      { imgSrc: '/assets/images/client/client-7.svg', altText: 'client-7' }
  ];
</script>