Vue3 で Swiper を使用するにはどうすればよいですか?

はじめに

カルーセル グラフの効果を実現するには、vue3 で swiper を使用します。コンポーネント スタイルなどのモジュールが不適切に導入されると、ページが無効になります。効果、または目的の矢印または切り替え効果が異常です。具体的な使用方法は次のとおりです。

使用方法

コマンドnpm install swiperを使用して、swiperプラグインをインストールします。

in# 以下に示すように、##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

  : 1 つのディスプレイを制御します。 複数のカルーセル画像

• space-between

  : 各カルーセル画像間の距離。この属性は # と組み合わせることはできません。 ##margin 属性 同時に使用します;

autoplay
• : 自動的に回転するかどうか、

  lay はミリ秒数です間隔の値; disableOnInteraction 属性のデフォルト true、つまり、ユーザーが手動で をスライドすると、自動再生は無効になります。false に設定すると、自動再生が無効になります。 、無効化されず、手動でトリガーされるたびに再起動されます。自動再生を開始します。

ナビゲーション
• : 左右の切り替え矢印を定義します

ページネーション
• : ドットが表示されるかどうかを制御しますクリック可能 インジケータスイッチ carousel

scrollbar
• : カルーセル画像のスクロールバーを表示するかどうか、

  draggable を に設定しますtrue 下部のスクロール バーをドラッグできます (この属性は通常、カルーセルでは使用されません)

以上がVue3 で Swiper を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。