How to use Swiper with Vue3?

Introduction

Use swiper in vue3 to achieve the effect of carousel graph; if modules such as component styles are introduced improperly, it is very likely that the page will be invalid. Effect; or the desired arrow or switching effect is abnormal. The specific usage is as follows:

Usage

Use the commandnpm install swiper to install the swiper plug-in;

in# Use the style file in ##main.js, as shown below:

import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')

In the page used, introduce the components that need to be used, such as commonly used left and right switching arrows, small dot indicators, etc.; As shown below:

import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条， 轮播图里一般不怎么会使用到滚动条，如果有用到的话import导入就行
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'

const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  console.log(swiper.activeIndex)
}

Use components and related modules in the page

<swiper
    :modules="modules"
	:loop="true"
	:slides-per-view="1"
	:space-between="50"
	:autoplay="{ delay: 4000, disableOnInteraction: false }"
	:navigation="navigation"
	:pagination="{ clickable: true }"
	:scrollbar="{ draggable: false }"
   	class="swiperBox"
   	@slideChange="onSlideChange"
>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
    <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-button-next" @click.stop="nextEl" />
    <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</swiper>

Parameter introduction:

modules:

• loop: Whether to loop playback

• slides-per-view: Control one display Several carousel images

• space-between: The distance between each carousel image, this attribute cannot be combined with the margin attribute Use at the same time;

• autoplay: Whether to automatically rotate, delay is the number of milliseconds of the interval; disableOnInteraction attribute default Is true, that is, when the user manually slides , automatic playback is disabled. When set to false, it will not be disabled and will be restarted every time it is manually triggered. Start autoplay.

• navigation: Define left and right switching arrows

• pagination: Control whether the dot can be clicked Indicator switch carousel

• scrollbar: Whether to display the scroll bar of the carousel image, draggable is set to true You can drag the scroll bar at the bottom (this attribute is generally not used in carousels)

The above is the detailed content of How to use Swiper with Vue3?. For more information, please follow other related articles on the PHP Chinese website!