Wie verwende ich Swiper mit Vue3?

Einführung

Verwenden Sie swiper in vue3, um den Effekt von Karussellbildern zu erzielen, wenn Module wie Komponentenstile nicht ordnungsgemäß eingeführt werden. Dies ist sehr gefährlich. Es kann dazu führen, dass die Seite keine Wirkung zeigt oder der gewünschte Pfeil oder Umschalteffekt abnormal ist. Die spezifische Verwendung ist wie folgt: 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

  Verwendung

Verwenden Sie den Befehl npm install swiper, um das Plug-in swiper zu installieren. in; #🎜 🎜##🎜🎜#Verwenden Sie Stildateien in main.js, wie unten gezeigt: #🎜🎜#rrreee#🎜🎜#Stellen Sie die Komponenten vor, die Sie auf der von Ihnen verwendeten Seite verwenden müssen , wie häufig verwendete Links- und Rechtsschaltpfeile, kleine Punktanzeigen usw.; wie unten gezeigt: #🎜🎜#rrreee#🎜🎜#Verwenden Sie Komponenten und zugehörige Module auf der Seite#🎜🎜#rrreee#🎜🎜#Parametereinführung: strong>#🎜🎜##🎜🎜#modules：#🎜🎜#

• #🎜🎜 #loop: Ob die Wiedergabe wiederholt werden soll#🎜🎜##🎜🎜#
• #🎜🎜#slides-per-view: Steuern Sie, wie viele Karussellbilder angezeigt werden a time#🎜🎜##🎜🎜#
• #🎜🎜#space-between: Der Abstand zwischen den einzelnen Karussellbildern. Dieses Attribut kann nicht zusammen mit dem marginverwendet werden > attribute; #🎜🎜##🎜🎜 #
• #🎜🎜#autoplay: Ob automatisch gedreht werden soll, delay ist die Anzahl der Millisekunden des Intervalls; Der Standardwert des Attributs disableOnInteraction ist true, d. h. deaktiviere die automatische Wiedergabe, nachdem der Benutzer manuell gleitet /code> wird nicht deaktiviert und nach jedem manuellen Auslösen der Wiedergabe automatisch neu gestartet. #🎜🎜##🎜🎜#
• #🎜🎜#navigation: Links- und rechtswechselnde Pfeile definieren #🎜🎜##🎜🎜#
• #🎜🎜#Paginierung: Steuern Sie, ob auf die Punktanzeige geklickt werden kann, um das Karussell zu wechseln. #🎜🎜##🎜🎜#<li>#🎜🎜#<code>scrollbar: Ob die Bildlaufleiste des Karussellbilds angezeigt werden soll , dragable Auf true setzen, um die Bildlaufleiste unten zu ziehen (dieses Attribut wird im Allgemeinen nicht in Karussells verwendet) #🎜🎜##🎜🎜##🎜🎜#

Das obige ist der detaillierte Inhalt vonWie verwende ich Swiper mit Vue3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!