Swiper-Wrapper的完整解析

Swiper-Wrapper是移動端滑動組件Swiper.js的底層容器元素，它旨在包裹並管理Swiper的滑動內容。本文將從樣式設置、屬性配置和使用示例等方面對Swiper-Wrapper進行詳細闡述。

一、Swiper-Wrapper樣式設置

1. Container

Swiper外層包裹元素的樣式設置。

.swiper-container {
    width: 100%;
    height: 100%;
    ...
}

2. Wrapper

Swiper-Wrapper包裹層的樣式設置。

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    ...
}

3. Slide

每個滑動元素的樣式設置，可以通過swiper-slide類名來定位。

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    ...
}

二、Swiper-Wrapper屬性配置

1. Direction

定義Swiper-Wrapper的滑動方向，包括水平(horizontal)和垂直(vertical)兩種模式。

var swiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    ...
});

2. Speed

定義Swiper-Wrapper的滑動速度，單位為毫秒，默認值為300。

var swiper = new Swiper('.swiper-container', {
    speed: 1000,
    ...
});

3. SlidesPerView

定義Swiper-Wrapper中同時可見的滑動元素數目，可以設置為整數或者’auto’。

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    ...
});

4. SpaceBetween

定義Swiper-Wrapper中相鄰滑動元素之間的距離，單位為像素。

var swiper = new Swiper('.swiper-container', {
    spaceBetween: 30,
    ...
});

三、Swiper-Wrapper使用示例

1. 基本示例

Swiper-Wrapper的基本使用示例：

 Slide 1
原創文章，作者：JMZH，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/146729.html