Bagaimana untuk menggunakan Swiper dengan Vue3?

Pengenalan

Gunakan vue3 dalam swiper untuk mencapai kesan karusel jika modul seperti gaya komponen diperkenalkan secara tidak wajar, kemungkinan besar halaman tidak akan memberi kesan atau yang diingini; anak panah atau Kesan pensuisan adalah tidak normal. Penggunaan khusus adalah seperti berikut:

Penggunaan

Gunakan arahan npm install swiper untuk memasang swiper pemalam

gunakan fail gaya dalam main.js , seperti yang ditunjukkan di bawah :

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

Perkenalkan komponen yang anda perlu gunakan pada halaman yang anda gunakan, seperti anak panah bertukar kiri dan kanan yang biasa digunakan, penunjuk titik kecil, dll. seperti yang ditunjukkan di bawah:

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

Gunakan komponen dalam halaman Dan modul yang berkaitan

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

Pengenalan parameter:

modules:

• loop: Sama ada hendak menggelung main balik

• slides-per-view: Kawal bilangan imej karusel dipaparkan pada satu masa

• space-between: Jarak antara setiap imej karusel, Atribut tidak boleh digunakan bersama dengan atribut margin

• autoplay: sama ada hendak berputar secara automatik, delay ialah bilangan milisaat; daripada selang; nilai lalai atribut disableOnInteraction ialah true , iaitu, apabila pengguna meluncur secara manual 禁用自动播放, selepas ia ditetapkan kepada false, ia tidak akan dilumpuhkan dan main balik automatik akan dimulakan semula setiap kali ia dicetuskan secara manual.

• navigation: Tentukan anak panah bertukar kiri dan kanan

• pagination: Kawal sama ada penunjuk titik boleh diklik untuk menukar karusel

• scrollbar: Sama ada untuk memaparkan bar skrol imej karusel jika draggable ditetapkan kepada true, anda boleh menyeret bar skrol bawah (ini biasanya. tidak digunakan dalam karusel) Sifat)

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Swiper dengan Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!