How to use Swiper with Vue3?

Introduction

Useswiperinvue3to 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 swiperto install theswiperplug-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')

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) }

 Slide 1 Slide 2 Slide 3 
  
    

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 themarginattribute Use at the same time;

• autoplay: Whether to automatically rotate,delayis the number of milliseconds of the interval;disableOnInteractionattribute default Istrue, that is, when the user manually slides, automatic playback is disabled. When set tofalse, 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,draggableis set totrueYou 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!