Swiper5 使用方法

2022-06-17 12:54:13 字數 977 閱讀 8203

doctype html

>

<

html

>

<

head

>

...

<

link

rel="stylesheet"

href

="dist/css/swiper.min.css"

>

head

>

<

body

>

...

<

script

src="dist/js/swiper.min.js"

>

script

>

...body

>

html

>

2.html內容。

slide 2

slide 3

導航等元件可以放在container之外

3.你可能想要給swiper定義乙個大小,當然不要也行。

.swiper-container  

4.初始化swiper:最好是挨著標籤

...

如果不能寫在html內容的後面,則需要在頁面載入完成後再初始化。

或者這樣(jquery和zepto)(推薦)

5.完成。恭喜你,現在你的swiper應該已經能正常切換了。

如果作為commonjs 或es 模組引入

//commonjs

var swiper = require('swiper');    

var myswiper = new swiper('.swiper-container', );

//es

import swiper from 'swiper';    

var myswiper = new swiper('.swiper-container', );

Swiper使用方法

1.首先載入外掛程式,需要用到的檔案有swiper.min.js和swiper.min.css檔案。rel stylesheet href path to swiper.min.css head src path to swiper.min.js script body html 如果你的頁面載入了...

Swiper教程 使用方法

本文為 h5edu 機構官方 html5培訓 教程,主要介紹 swiper教程 使用方法 swiper使用方法 1.首先載入外掛程式,需要用到的檔案有swiper.min.js和swiper.min.css檔案。如果你的頁面載入了jquery.js或者zepto.js,你可以選擇使用更輕便的swip...

Swiper教程 使用方法

swiper使用方法 1.首先載入外掛程式,需要用到的檔案有swiper.min.js和swiper.min.css檔案。如果你的頁面載入了jquery.js或者zepto.js,你可以選擇使用更輕便的swiper.jquery.min.js。2.html內容。slide 2 slide 3 導航等...