[Vuejs]-How to get the element <div> from swiper api

by

0👍

✅

is this what you’re looking for ? You can try my code first and see if it works

<template>
  <div class="edge">
    <div class="container px-4 mx-auto">
      <swiper
        @swiper="onSwiper"
        :spaceBetween="30"
        :centeredSlides="true"
        :autoplay="{
          delay: 2500,
          disableOnInteraction: false,
        }"
        :slidesPerView="shows.length"
        :pagination="{
          clickable: true,
        }"
        :navigation="false"
        :modules="modules"
        class="mySwiper"
      >
        <!-- Loop Img -->
        <swiper-slide v-for="(show, index) in shows" :key="index">
          <img :src="show.image" class="swiper-image" />
        </swiper-slide>

        <!-- <swiper-slide>
          <img
            src=""
            class="swiper-image"
          />
        </swiper-slide>

        <swiper-slide>
          <img
            src=""
            class="swiper-image"
          />
        </swiper-slide>

        <swiper-slide>
          <img
            src=""
            class="swiper-image"
          />
        </swiper-slide> -->
        <button class="swiper-nav swiper-next-prev" @click="swipePrevious">
          prev
        </button>
        <button class="swiper-nav swiper-next-button" @click="swipeNext">
          next
        </button>
      </swiper>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    /* Swiper Img */
    const activeIndex = ref(0);
    const shows = ref([
      { image: "/images/swiper-1/show1.jpg" },
      { image: "/images/swiper-1/show2.jpg" },
    ]);

    return {
      swiper: null,
      modules: [Autoplay, Pagination, Navigation],
      shows: shows,
    };
  },
  methods: {
    onSwiper(sw) {
      this.swiper = sw;
    },
    swipeNext() {
      this.swiper.slideNext();
    },
    swipePrevious() {
      this.swiper.slidePrev();
    },
  },
};
</script>

<style scoped>
.mySwiper {
  position: relative;
}
.swiper-nav {
  z-index: 10;
  right: 100px;
  position: absolute;
  bottom: 0;
}
.swiper-image {
  width: 100%;
}
.swiper-next-prev {
  margin-right: 100px;
}
.edge {
  padding-bottom: 8rem;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  font-size: 18px;
  background: #fff;
  padding-bottom: 3rem; /* pagination fall down */
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
}
.swiper-slide img {
  object-fit: cover;
}

/* --------------- Swiper overwrite --------------- */
.swiper /deep/ .swiper-slide img {
  border-radius: 1.25rem;
  flex-shrink: 0;
  /* position: relative;  */
}

/* Arrow btn */
.swiper /deep/ .swiper-button-prev:after {
  color: var(--light-gold, #857056); /* arrow sign */

  /* circle  */
  border-width: 2.5px; /* edge thickness */
  border-color: #857056;
  background-color: white;
  border-radius: 9999px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2.4rem;
  transform: scale(0.4);
}
.swiper /deep/ .swiper-button-next:after {
  color: var(--light-gold, #857056); /* arrow sign */

  /* circle  */
  border-width: 2.5px; /* edge thickness */
  border-color: #857056;
  background-color: white;
  border-radius: 9999px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2.4rem;
  padding-right: 2rem;
  transform: scale(0.4);
}

/* Pagination */
.swiper /deep/ .swiper-pagination-bullets .swiper-pagination-bullet {
  background: #d1d1d1;
}
.swiper /deep/ .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background: #0581c3;
}
</style>

I’ve add a few html, style, and script. Please check it out

edit 1:

add use shows variable to loop image

Leave a comment