Framework7滑动滑块

本文概述

• 滑动滑块的HTML布局
• 使用JavaScript初始化Swiper
• 用HTML初始化Swiper

Framework7提供了滑动滑块, 这是一个非常强大且现代的触摸滑块。它还提供了很多功能。

滑动滑块的HTML布局

<!-- Slider container -->
<div class="swiper-container">
    <!-- Slides wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ... other slides ...
    </div>
    <!-- Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>

这里：

swiper-container：它是带有滑块和分页的主要滑块容器类。必填元素

swiper-wrapper：这是幻灯片的附加包装。必填元素

swiper-slide：它是单个滑动元素。里面可以包含任何HTML

swiper-pagination：它是带有分页项目符号的容器, 在其中可以自动创建分页项目符号。它是一个可选元素。

使用JavaScript初始化Swiper

可以使用以下与JavaScript相关的方法来初始化Swiper：

myApp.swiper(swiperContainer, parameters)
OR
new Swiper(swiperContainer, parameters)

参数说明：

swiperContainer：它是HTMLElement或swiper容器的字符串, 是必需的。

参数：这些是包含带有滑动参数的对象的可选元素。

注意：以上两种方法均可用于使用选项初始化滑块。

例如：

var mySwiper = app.swiper('.swiper-container', {
    speed: 400, spaceBetween: 100
});

用HTML初始化Swiper

滑行滑块的类型

Framework7中有几种不同类型的刷卡器：