Vue3에서 Swiper를 어떻게 사용하나요?

소개

캐러셀 이미지 효과를 얻으려면 vue3에서 swiper를 사용하세요. 구성 요소 스타일과 같은 모듈이 부적절하게 도입되면 페이지에 아무 것도 없을 가능성이 높습니다. 원하는 화살표 또는 전환 효과가 비정상적입니다. 구체적인 사용법은 다음과 같습니다. 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

npm install swiper 명령을 사용하여 swiper 플러그인을 설치합니다. 🎜🎜main.js 아래와 같이 스타일 파일을 사용합니다. 🎜rrreee🎜 사용 중인 페이지에서 일반적으로 사용되는 왼쪽 및 오른쪽 전환 화살표, 작은 점 표시 등 사용해야 할 구성 요소를 아래와 같이 소개합니다. : 🎜rrreee🎜 구성요소 및 관련 모듈 사용 🎜rrreee🎜<strong>매개변수 소개:</strong>🎜🎜<code>모듈: 🎜

• 🎜 loop code>: 반복 재생 여부🎜🎜<li>🎜<code>slides-per-view: 한 번에 표시되는 회전식 이미지 수 제어🎜🎜
• 🎜space-between: 각 캐러셀 이미지 사이의 거리입니다. 이 속성은 margin 속성과 함께 사용할 수 없습니다. 🎜🎜
• 🎜autoplay 자동으로 회전하려면 지연은 간격의 밀리초 수입니다. disableOnInteraction 속성의 기본값은 true입니다. 즉, 사용자가 수동으로 슬라이드하는 경우입니다. , 자동 재생 비활성화, 설정 false로 설정하면 비활성화되지 않으며 각 수동 트리거 후에 자동 재생이 다시 시작됩니다. 🎜🎜
• 🎜탐색: 왼쪽 및 오른쪽 전환 화살표 정의🎜🎜
• 🎜페이지 매김: 점 표시를 클릭하여 캐러셀을 전환할 수 있는지 여부를 제어합니다🎜 🎜
• 🎜scrollbar: 캐러셀 이미지의 스크롤 막대를 표시할지 여부. 하단 스크롤 막대를 드래그하려면 draggable을 true로 설정하세요( 캐러셀 동안 일반적으로 이 속성은 거의 사용되지 않습니다)🎜🎜🎜

위 내용은 Vue3에서 Swiper를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!