vue uses swiper to achieve carousel effect with large middle and small sides.

The vue used in the project happens to be in need of carousel images, highlighting the current picture and displaying other pictures on both sides; it has been realized by looking up various information, so it is recorded here

Let's take a look at the implementation steps below:

• Step 1: First introduce the swiper css file in the project-
• Part 2: Write to the dom structure
  

<div class="swiper-container">
 <div class="swiper-wrapper">
  <div
   v-for="(item, i) in pictures"
   :key="i"
   class="swiper-slide"
  >
   <!-- Specific content -->
   <img
    :src=""
    alt="Product Pictures"
   >
  </div>
 </div>
</div>

Step 3: Use npm to install the swiper module in the project

npm install swiper --save-dev

JS Chinese - Front-end Advanced Resource TutorialA platform dedicated to helping developers change the world with code as their mission, where you can find headlines in the world of technology every day

Step 4: Introduce in the vue file and initialize swiper; first introduce swiper

import Swiper from "swiper";

Note that initialization needs to be put into the mounted hook

import Swiper from "swiper";

export default {
 data() {
 return {
 }
 },
 mounted() {
 var mySwiper = new Swiper(".swiper-container", {
   direction: "horizontal",
   loop: false,
   slidesPerView: "auto",
   centeredSlides: true,
   spaceBetween: 20,
   observer: true,
   observeParents: true
 });
 }
}

If the image in your project is obtained from the background interface, then there may be problems with the initialization above. At this time, we will take another method to initialize swiper

import Swiper from "swiper";

export default {
 data() {
 return {
  mySwiper: null
 }
 },
 methods: {
 getdata() {
  (res => {
   =  || [];
  this.$nextTick(() => {
   ();
  });
  });
 },
 initSwiper() {
    = new Swiper(".swiper-container", {
    direction: "horizontal",
     loop: false,
     slidesPerView: "auto",
     centeredSlides: true,
     spaceBetween: 20,
     observer: true,
     observeParents: true
   });
   }
 }
}

Put swiper initialization into vue's nextTick to execute, and the problem will be solved

Step 5: What should I do if I want to get the picture I currently scrolled to

;

Use the activeIndex property to get the index of the current image. Then our function is complete

Summarize

The above is what the editor introduced to you. Vue uses swiper to achieve the carousel effect of large and small on both sides. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!