swiper的基礎使用(十)

2021-07-13 19:29:01 字數 816 閱讀 2130

本文為

h5edu

機構官方的

html5

培訓教程 

swiper教程

這節課我們介紹swiper頁面的多行顯示。

這節課我們介紹swiper當中的swiper巢狀。

這次第一步有些不一樣,雖然同樣是要搭建swiper頁面,但是我們在乙個swiper頁面當中的slide裡面巢狀了乙個swiper在裡面。

vertical slide 2

vertical slide 3

vertical slide 4

vertical slide 5

horizontal slide 3

horizontal slide 4

我們可以看到,這次在swiper的外部容器當中新增了乙個類名,swiper-container-h,這個類名其實我們可以隨便取乙個,作為乙個標記,記錄我們這個外部容器為哪乙個swiper頁面的外部容器,我們在初始化的時候是要繫結它的,然後有幾個swiper的頁面我們就要初始化幾次,並且每乙個初始化都要繫結到不同的swiper頁面的外部容器上面,不然的話我們的頁面樣式就會錯亂,下面進行初始化。

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

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

這裡因為有倆個swiper頁面所以分別初始化了倆次,然後要分別設定每個swiper頁面的css樣式,以及每乙個swiper頁面當中的屬性。注意,繫結的外部容器類名一定部能相同,不然乙個頁面初始化倆次會造成樣式錯亂。

swiper教程 swiper的基礎使用(十九)

本文為 h5edu 機構官方的 html5培訓 html5培訓教程 swiper教程。這次內容我們介紹如何在swiper的頁面當中新增鍵盤控制翻頁的功能。開始還是搭建swiper頁面。h5edu2 h5edu3 h5edu4 h5edu5 然後在js當中進行初始化並且設定css樣式。var swip...

swiper的基礎使用(十二)

本節內容介紹swiper當中如何將導航變為滾動條樣式。首先我們搭建乙個swiper頁面的基本布局。h5edu 2 h5edu 3 h5edu 4 h5edu 5 h5edu 6 h5edu 7 h5edu 8 h5edu 9 然後到js部分新增初始化 var swiper new swiper sw...

swiper的基礎使用 十五

這次內容我們介紹如何在swiper頁面的翻頁動畫 漸變效果 既然有翻頁,那麼肯定少不了翻頁效果,這個功能在swiper當中也給我們進行了包裝,所以我們在使用的時候變得非常的方便。首先進行基本的布局以及css樣式的設定。第二頁 第三頁 為了動畫效果明顯,我在每個slide當中新增了背景。然後在js當中...