Carousel

<template>
  <Swiper
    :space-between="30"
    :pagination="{ el: '.docss1p', clickable: true }"
    :modules="[Pagination, Navigation]"
    :navigation="{
      prevEl: '.docss1nbp',
      nextEl: '.docss1nbn',
    }"
    :grab-cursor="true"
    :breakpoints="{
      500: { slidesPerView: 1 },
      768: { slidesPerView: 2 },
      1024: { slidesPerView: 3 },
      1200: { slidesPerView: 3 },
    }"
  >
    <SwiperSlide v-for="(photo, index) in photoList" :key="index">
      <figure class="overlay overlay-1 hover-scale rounded mb-0">
        <a href="#">
          <nuxt-img :src="photo.src" :srcset="photo.srcset" alt="" />
          <span class="bg"></span>
        </a>
        <figcaption>
          <h5 class="from-top mb-0">Read More</h5>
        </figcaption>
      </figure></SwiperSlide
    >
  </Swiper>
  <div class="swiper-controls">
    <div
      class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal docss1p"
    ></div>
    <div class="swiper-navigation">
      <div class="swiper-button swiper-button-prev docss1nbp"></div>
      <div class="swiper-button swiper-button-next docss1nbn"></div>
    </div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
const photoList = [
  {
    id: 1,
    src: "/assets/img/photos/p1.jpg",
    srcset: "/assets/img/photos/p1@2x.jpg 2x",
  },
  {
    id: 2,
    src: "/assets/img/photos/p2.jpg",
    srcset: "/assets/img/photos/p2@2x.jpg 2x",
  },
  {
    id: 3,
    src: "/assets/img/photos/p3.jpg",
    srcset: "/assets/img/photos/p3@2x.jpg 2x",
  },
  {
    id: 4,
    src: "/assets/img/photos/p4.jpg",
    srcset: "/assets/img/photos/p4@2x.jpg 2x",
  },
  {
    id: 5,
    src: "/assets/img/photos/p5.jpg",
    srcset: "/assets/img/photos/p5@2x.jpg 2x",
  },
  // Add more photos as needed
];
</script>

<style lang="scss" scoped></style>

              

<template>
  <Swiper
    :space-between="30"
    :pagination="{ el: '.docssp2', clickable: true }"
    :modules="[Pagination]"
    :grab-cursor="true"
    :breakpoints="{
      500: { slidesPerView: 1 },
      768: { slidesPerView: 2 },
      1024: { slidesPerView: 2 },
    }"
  >
    <SwiperSlide v-for="(elm, i) in slideContent" :key="i"
      ><div class="item-inner">
        <article>
          <div class="card">
            <div class="card-body">
              <p>
                {{ elm.desc }}
              </p>
            </div>
            <!--/.card-body -->
          </div>
          <!-- /.card -->
        </article>
        <!-- /article -->
      </div>
    </SwiperSlide>
  </Swiper>
  <div class="swiper-controls">
    <div
      class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal docssp2"
    ></div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
const slideContent = [
  {
    id: 1,
    desc: ` Duis mollis est non commodo luctu, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Nullam quis risus eget urna
            mollis ornare vel. Nulla vitae elit libero, a pharetra augue.
            Praesent commodo cursus magna vel scelerisque nisl consectetur
            et.`,
  },
  {
    id: 2,
    desc: ` Duis mollis est non commodo luctu, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Nullam quis risus eget urna
            mollis ornare vel. Nulla vitae elit libero, a pharetra augue.
            Praesent commodo cursus magna vel scelerisque nisl consectetur
            et.`,
  },
  {
    id: 3,
    desc: ` Duis mollis est non commodo luctu, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Nullam quis risus eget urna
            mollis ornare vel. Nulla vitae elit libero, a pharetra augue.
            Praesent commodo cursus magna vel scelerisque nisl consectetur
            et.`,
  },
  {
    id: 4,
    desc: ` Duis mollis est non commodo luctu, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Nullam quis risus eget urna
            mollis ornare vel. Nulla vitae elit libero, a pharetra augue.
            Praesent commodo cursus magna vel scelerisque nisl consectetur
            et.`,
  },
];
</script>

<style lang="scss" scoped></style>
              

<template>
  <Swiper
    :space-between="30"
    :pagination="{ el: '.docssp3', clickable: true }"
    :modules="[Pagination]"
    :grab-cursor="true"
    :breakpoints="{
      500: { slidesPerView: 1 },
      768: { slidesPerView: 1 },
      1024: { slidesPerView: 1 },
    }"
  >
    <SwiperSlide v-for="(elm, i) in slideContent" :key="i">
      <p>
        {{ elm.desc }}
      </p>
    </SwiperSlide>
  </Swiper>
  <div class="swiper-controls">
    <div
      class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal docssp3"
    ></div>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
const slideContent = [
  {
    id: 1,
    desc: ` Aenean eu leo quam. Pellentesque ornare sem lacinia quam
            venenatis vestibulum. Aenean eu leo quam. Pellentesque
            ornare sem lacinia quam venenatis vestibulum. Nullam id
            dolor id nibh ultricies vehicula ut id elit. Cum sociis
            natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Cras mattis consectetur purus sit amet
            fermentum. Maecenas faucibus mollis interdum.`,
  },
  {
    id: 2,
    desc: ` Aenean eu leo quam. Pellentesque ornare sem lacinia quam
            venenatis vestibulum. Aenean eu leo quam. Pellentesque
            ornare sem lacinia quam venenatis vestibulum. Nullam id
            dolor id nibh ultricies vehicula ut id elit. Cum sociis
            natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Cras mattis consectetur purus sit amet
            fermentum. Maecenas faucibus mollis interdum.`,
  },
  {
    id: 3,
    desc: ` Aenean eu leo quam. Pellentesque ornare sem lacinia quam
            venenatis vestibulum. Aenean eu leo quam. Pellentesque
            ornare sem lacinia quam venenatis vestibulum. Nullam id
            dolor id nibh ultricies vehicula ut id elit. Cum sociis
            natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Cras mattis consectetur purus sit amet
            fermentum. Maecenas faucibus mollis interdum.`,
  },
  {
    id: 4,
    desc: ` Aenean eu leo quam. Pellentesque ornare sem lacinia quam
            venenatis vestibulum. Aenean eu leo quam. Pellentesque
            ornare sem lacinia quam venenatis vestibulum. Nullam id
            dolor id nibh ultricies vehicula ut id elit. Cum sociis
            natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Cras mattis consectetur purus sit amet
            fermentum. Maecenas faucibus mollis interdum.`,
  },
];
</script>

<style lang="scss" scoped></style>

              

<template>
  <div class="card">
    <div class="card-body">
      <div class="swiper-container swiper-thumbs-container dots-over">
        <Swiper
          :space-between="10"
          :navigation="{ prevEl: '.spnvp', nextEl: '.spnvn' }"
          :modules="[Navigation, Thumbs]"
          :grab-cursor="true"
          :thumbs="{ swiper: thumbsSwiper }"
        >
          <swiper-slide v-for="(image, index) in productImages" :key="index">
            <figure class="rounded">
              <nuxt-img :src="image.src" :srcset="image.srcset" alt="" />
              <div
                class="item-link cursor-pointer"
                @click="() => setActiveLightBox(true, index)"
              >
                <i class="uil uil-focus-add"></i>
              </div>
            </figure>
          </swiper-slide>
        </Swiper>
        <div class="swiper-controls">
          <div class="swiper-navigation">
            <div class="swiper-button swiper-button-prev spnvp"></div>
            <div class="swiper-button swiper-button-next spnvn"></div>
          </div>
        </div>

        <!-- /.swiper -->
        <div class="swiper swiper-thumbs">
          <Swiper
            :space-between="10"
            :slides-per-view="5"
            :modules="[Thumbs]"
            @swiper="setThumbsSwiper"
            :grab-cursor="true"
          >
            <swiper-slide v-for="(image, index) in productImages" :key="index">
              <figure class="rounded">
                <nuxt-img
                  :src="image.src"
                  :srcset="image.srcset"
                  alt=""
                  class="rounded"
                />
              </figure>
            </swiper-slide>
          </Swiper>

          <!--/.swiper-wrapper -->
        </div>
      </div>
    </div>
  </div>
  <CommonLightbox
    :images="images"
    :activeLightBox="activeLightBox"
    :firstSlideIndex="currentSlideIndex"
    @setActiveLightBox="setActiveLightBox"
  />
</template>

<script setup>
const productImages = ref([
  {
    src: "/assets/img/photos/shs1.jpg",
    srcset: "/assets/img/photos/shs1@2x.jpg 2x",
    link: "/assets/img/photos/shs1@2x.jpg",
  },
  {
    src: "/assets/img/photos/shs2.jpg",
    srcset: "/assets/img/photos/shs2@2x.jpg 2x",
    link: "/assets/img/photos/shs2@2x.jpg",
  },
  {
    src: "/assets/img/photos/shs3.jpg",
    srcset: "/assets/img/photos/shs3@2x.jpg 2x",
    link: "/assets/img/photos/shs3@2x.jpg",
  },
  {
    src: "/assets/img/photos/shs4.jpg",
    srcset: "/assets/img/photos/shs4@2x.jpg 2x",
    link: "/assets/img/photos/shs4@2x.jpg",
  },
]);
const images = productImages.value.map((elm) => elm.src);
const activeLightBox = ref(false);
const currentSlideIndex = ref();

const setActiveLightBox = (val, i) => {
  currentSlideIndex.value = i;
  activeLightBox.value = val;
};

import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Thumbs } from "swiper/modules";

const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};
</script>

<style lang="scss" scoped></style>