Location>code7788 >text

vue3 using swiper rotation component

Popularity：229 ℃/2024-10-22 18:17:09

Local Environmental Information

node version:

nodejs : v18.20.4
npm : 10.7.0

vue version

  "dependencies": {
    "vue": "^3.2.13",
    ...
  }

Install swiper dependencies

Execute the command:

npm i swiper

After installation, look at the files in the project, new swiper dependencies have been added (default latest version):

  "dependencies": {
    "swiper": "^11.1.14",
    "vue": "^3.2.13",
    ...
  }

Default effect of rotating image

Effect Description:

1、Multi-picture automatic playback
2. With indicator
3. There are left and right navigation buttons (forward and backward)

Image Import Project

code implementation
<template>
  <swiper
      class="swiper-container"
      :slides-per-view="1"
      :space-between="0"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :modules="modules"
      :pagination="{ clickable: true }"
      :autoplay="{
      delay: 2000,
      disableOnInteraction: false,
      }"
      navigation
      :loop="true"
  >
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
  </swiper>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

const modules = [Navigation, Pagination, A11y, Autoplay]
const swiperInstance = ref<typeof Swiper | null>(null);

const onSwiper = (swiper: typeof Swiper) => {
   = swiper;
};
const onSlideChange = () => {
  ('slide change');
};
</script>

<style scoped>
.swiper-container {
  background-color: white;
}

.item {
  width: 100%;
  height: auto;
}
</style>
Code Interpretation:

Import swiper components: Swiper container; SwiperSlide child item container

import {Swiper, SwiperSlide} from 'swiper/vue';

Importing Modules: Because swiper splits different functions into components to make them more flexible, we can use specific functions by simply importing the corresponding modules.
Navigation (left and right button functionality), Pagination (paging indicator functionality), A11y (auxiliary function module designed to improve the accessibility of a website or application), Autoplay (autoplay functionality)

import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules';
const modules = [Navigation, Pagination, A11y, Autoplay]

Import the relevant styles and import the corresponding css by function:

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

Use Swiper, SwiperSlide components in templates and configure modules, properties, events, etc.

:slides-per-view: This property sets the number of visible slides per view. In this case, a setting of 1 means that only one slide will be shown at a time.
:space-between: This property sets the spacing between the sliders. Here, a setting of 0 means there is no spacing between the sliders.
@swiper="onSwiper": This attribute is an event listener that triggers a method named "onSwiper" when the Swiper initialization is complete.
@slideChange="onSlideChange": This attribute is another event listener that triggers a method named "onSlideChange" when the slider is switched.
:modules: This attribute specifies the modules used by the Swiper instance. This attribute allows you to configure the various modules used by the Swiper instance [here, navigation, indicators, autoplay, etc.].
:pagination: This property configures Swiper's pagination indicator, which is set to be clickable so that the user can switch to a different slider by clicking on the pagination.
:autoplay: This property configures the autoplay feature, setting the playback delay to 2000 milliseconds (2 seconds) and not stopping the autoplay when the user interacts.
navigation: This attribute enables Swiper's navigation buttons, which typically display left and right arrows or other navigation elements for the user to manually navigate the slider.
:loop: This property sets whether Swiper will loop through the content of the slider, i.e. whether it will automatically switch to the first slider when the last slider is reached. Setting it to true means loop is enabled.

<swiper
      class="swiper-container"
      :slides-per-view="1"
      :space-between="0"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :modules="modules"
      :pagination="{ clickable: true }"
      :autoplay="{
      delay: 2000,
      disableOnInteraction: false, }" :modules="{ clickable: true }
      }"
      navigation
      :loop="true"
  >
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide> <class="item" src="@/assets/banner/"/>
  </swiper>

Define swiper instances for subsequent swiper operations, such as jumping to the next page, pausing autoplay, and so on.

const swiperInstance = ref<typeof Swiper | null>(null);

Event Method Definitions

// After initializing swiper, assign a value to swiperInstance
const onSwiper = (swiper: typeof Swiper) => {
   = swiper;
};
// Listen to the slide change event callbacks.
const onSlideChange = () => {
  ('slide change');
};
Realization effects

Optimize autoplay effect

The current autoplay is not affected by the outside world, if the user's mouse moves into the swiper, the swiper should be allowed to pause the slide, so that the user can view the specific information of the current slider; if the mouse slides out of the swiper, the autoslide should be continued.

Realization:

The swiper component listens for mouseover events:

@mouseenter="pauseSwiper"
@mouseleave="resumeSwiper"

script to implement the corresponding method:

const pauseSwiper = () => {
  if () {
    ();
  }
};
const resumeSwiper = () => {
  if () {
    ();
  }
};

Customize left and right navigation buttons

The swiper comes with navigation buttons that in most cases need to have their effects/styles adapted to the UI design.

Here we simulate a modification that acts as a navigation button.

In the script, the function of switching the slider from left to right is implemented first:

const goPrev = ()=> {
  if () {
    ();
  }
};
const goNext = () => {
  if () {
    ();
  }
};

The default navigation property is no longer configured on the swiper component.
Import button images:

New left and right buttons are added to the layout and styled:

  <div class="custom-navigation">
      <img src="@/assets/img_pre.png" class="custom-swiper-button-prev" @click="goPrev">
      <img src="@/assets/img_next.png" class="custom-swiper-button-next" @click="goNext">
  </div>

.custom-swiper-button-prev, .custom-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #FFFFFF;
  font-size: 20px;
  width: 50px;
  height: 50px;
}

.custom-swiper-button-next {
  right: 20px;
}

.custom-swiper-button-prev {
  left: 20px;
}

Customize the navigation button effect:

Full Code

<template>
  <swiper
      class="swiper-container"
      :slides-per-view="1"
      :space-between="0"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :modules="modules"
      :pagination="{ clickable: true }"
      :autoplay="{
      delay: 2000,
      disableOnInteraction: false,
      }"
      :loop="true"
      @mouseenter="pauseSwiper"
      @mouseleave="resumeSwiper"
  >
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
    <swiper-slide>
      <img class="item" src="@/assets/banner/"/>
    </swiper-slide>
  </swiper>
  <div class="custom-navigation">
      <img src="@/assets/img_pre.png" class="custom-swiper-button-prev" @click="goPrev">
      <img src="@/assets/img_next.png" class="custom-swiper-button-next" @click="goNext">
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Navigation, Pagination, A11y, Autoplay} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

const modules = [Navigation, Pagination, A11y, Autoplay]
const swiperInstance = ref<typeof Swiper | null>(null);

const onSwiper = (swiper: typeof Swiper) => {
   = swiper;
};
const onSlideChange = () => {
  ('slide change');
};

const pauseSwiper = () => {
  if () {
    ();
  }
};
const resumeSwiper = () => {
  if () {
    ();
  }
};
const goPrev = ()=> {
  if () {
    ();
  }
};
const goNext = () => {
  if () {
    ();
  }
};
</script>

<style scoped>
.swiper-container {
  background-color: white;
}

.item {
  width: 100%;
  height: auto;
}

.custom-swiper-button-prev, .custom-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #FFFFFF;
  font-size: 20px;
  width: 50px;
  height: 50px;
}

.custom-swiper-button-next {
  right: 20px;
}

.custom-swiper-button-prev {
  left: 20px;
}
</style>
<Previous Next>