<template>
  <!-- App Screens start -->
  <section class="section overflow-hidden" id="screenshot">
    <b-container>
      <b-row class="justify-content-center mb-5">
        <b-col md="8" lg="6" class="text-center">
          <h6 class="subtitle">App <span class="fw-bold">Screens</span></h6>
          <h2 class="title">Awesome Screenshot</h2>
          <p class="text-muted mb-0">
            Sed ut perspiciatis unde omnis iste natus error voluptatem
            accusantium doloremque rem aperiam.
          </p>
        </b-col>
      </b-row>

      <b-row>
        <b-col>
          <!-- Swiper -->
          <div class="screen-slider overflow-hidden">
            <swiper
              class="swiper-wrapper py-5"
              :modules="modules"
              :space-between="24"
              :centeredSlides="true"
              :loop="true"
              :autoplay="{
                delay: 3000,
                disableOnInteraction: false,
              }"
              :pagination="{
                el: '.swiper-pagination',
                clickable: true,
              }"
              :breakpoints="{
                0: {
                  slidesPerView: 2,
                },
                576: {
                  slidesPerView: 3,
                },
                768: {
                  slidesPerView: 3.5,
                },
                // 991: {
                //   slidesPerView: 3,
                // },
                1024: {
                  slidesPerView: 4.2,
                },
              }"
            >
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/1.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/6.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/3.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/5.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/2.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/4.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>

              <!-- duplicate slide -->
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/1.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/6.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/3.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/5.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/2.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <swiper-slide class="swiper-slide"
                ><img
                  src="../assets/images/screen-shot/4.jpg"
                  alt=""
                  class="img-fluid"
              /></swiper-slide>
              <!-- <div class="swiper-pagination"></div> -->
            </swiper>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </section>
  <!-- App Screens end -->
</template>

<script lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Pagination, Autoplay],
    };
  },
};
</script>

<style scoped></style>
