Comment utiliser Swiper avec Vue3 ?

Introduction

Utilisez swiper dans vue3 pour obtenir l'effet d'images carrousel ; si des modules tels que les styles de composants sont introduits de manière incorrecte, il est très probable que la page n'aura pas ou vous souhaiterez peut-être que la flèche ou l'effet de commutation souhaité soit anormal. L'utilisation spécifique est la suivante : vue3 中使用 swiper, 实现轮播图的效果；如果组件样式等模块引入不当，很有可能导致，页面无效果；或者想要的箭头或者切换效果异常问题。具体使用方式如下所示：

使用方式

使用命令 npm install swiper 安装 swiper插件；

在main.js里使用样式文件，如下所示：

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

在页面中使用组件和相关的模块

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

参数介绍：

modules：

• loop： 是否循环播放

• slides-per-view：控制一次显示几张轮播图

• space-between： 每张轮播图之间的距离，该属性不可以和margin 属性同时使用；

• autoplay： 是否自动轮播， delay为间隔的毫秒数；disableOnInteraction属性默认是true，也就是当用户手动滑动后禁用自动播放， 设置为false后，将不会禁用，会每次手动触发后再重新启动自动播放。

• navigation： 定义左右切换箭头

• pagination： 控制是否可以点击圆点指示器切换轮播

• scrollbar： 是否显示轮播图的滚动条， draggable设置为 true

  Usage

Utilisez la commande npm install swiper pour installer le plug-in swiper 🎜🎜Dans main.js Utilisez un fichier de style, comme indiqué ci-dessous : 🎜rrreee🎜 Dans la page que vous utilisez, introduisez les composants que vous devez utiliser, tels que les flèches de commutation gauche et droite couramment utilisées, les petits indicateurs de points, etc. ; : 🎜rrreee🎜 Utiliser les composants et les modules associés 🎜rrreee🎜<strong>Introduction aux paramètres :</strong>🎜🎜<code>modules : 🎜

• 🎜 loop code> : s'il faut lire en boucle🎜🎜<li>🎜<code>diapositives par vue : contrôler le nombre d'images de carrousel affichées à la fois🎜🎜
• 🎜space-between : La distance entre chaque image du carrousel. Cet attribut ne peut pas être utilisé avec l'attribut margin : Si ; pour faire pivoter automatiquement, delay est le nombre de millisecondes de l'intervalle ; l'attribut disableOnInteraction est par défaut true, c'est-à-dire lorsque l'utilisateur glisse manuellement. , désactive la lecture automatique et définit Lorsqu'il est défini sur false, il ne sera pas désactivé et la lecture automatique sera redémarrée après chaque déclenchement manuel. 🎜🎜
• 🎜navigation : définissez les flèches de commutation gauche et droite🎜🎜
• 🎜pagination : contrôlez si vous pouvez cliquer sur l'indicateur de point pour changer de carrousel🎜 🎜
• 🎜scrollbar : Indique s'il faut afficher la barre de défilement de l'image du carrousel. Définissez draggable sur true pour faire glisser la barre de défilement inférieure (. pendant le carrousel, Généralement cet attribut est rarement utilisé)🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!