vue.js 用のカルーセル画像プラグインはありますか?

vue.js には、Swiper4 に基づいた Vue に適したカルーセル コンポーネントである vue-concise-slider などのカルーセル図プラグインがあり、サーバー側のレンダリングと単一ページ アプリケーションをサポートしています。 -awesome-swiper 構成 シンプルで、アダプティブ/フルスクリーン ボタン ページングをサポートし、モバイルと PC の両方と互換性があります。

vue.js カルーセル プラグイン vue-awesome-swiper

vue-awesome-swiper は Swiper4 に基づいています、Vue に適したカルーセル コンポーネントで、サーバー側のレンダリングと単一ページ アプリケーションをサポートします。

vue-awesome-swiper は swiper に基づいています。さまざまなバージョンの vue-awesome-swiper をインストールすると、さまざまなスワイパーに対応するため、swiper のほとんどのプロパティを vue-awesome-swiper に適用するか、またはそれに応じて適用できます。 swiper vue-awesome-swiper プロパティを設定するためのドキュメント;

swiper 公式ドキュメント: https://www.swiper.com.cn/api/index2.html

インストール:

npm install vue-awesome-swiper --save

インポートの使用法:

// import 
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// mount with global 
Vue.use(VueAwesomeSwiper)

// mount with component
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

ケース表示とサンプルコード:

https://surmon-china .github.io/vue-awesome-swiper/

バージョンの変更点に注意してください

バージョン 2.6 以降.0 では、swiper の css を手動で導入する必要があります

import 'swiper/dist/css/swiper.css'

プログラミング関連の知識については、

プログラミング コースをご覧ください。 ！

以上がvue.js 用のカルーセル画像プラグインはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。