📌  相关文章
📜  Framework7-滑动滑块

📅  最后修改于: 2020-10-25 02:53:29             🧑  作者: Mango

描述

滑动滑块是功能最强大且最先进的触摸滑块，它具有许多功能，它属于Framework7。

以下HTML布局显示了滑动滑块-




   
   

      
      
Slide 1

      
Slide 2

      
Slide 3

      ... other slides ...

以下类别用于滑动滑块-

  • 滑动容器-它是主滑块容器的必需元素，用于幻灯片和分页。

  • Swiper-wrapper-这是其他包装滑片的必需元素。

  • swiper-slide-它是单个slide元素，并且可以在其中包含任何HTML。

  • 滑动分页-分页项目符号是可选的，并且它们是自动创建的。

您可以使用JavaScript的相关方法来初始化swiper-

myApp.swiper(swiperContainer,parameters)

要么

new Swiper(swiperContainer, parameters)

两种方法都用于使用选项初始化滑块。

上面给出的方法包含以下参数-

  • swiperContainer-它是HTMLElement或swiper容器的字符串，是必需的。

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

例如-

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

可以访问swiper的实例，并且滑块容器的swiper属性具有以下HTML元素-

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

您可以在下表中看到不同的刷卡方式和类型-

S.No Swiper Types & Description
1 Default Swiper With Pagination

It is a modern touch slider and the swiper swipes horizontally, by default.
2 Vertical Swiper

This one also works as a default swiper but it swipes vertically.
3 With Space Between Slides

This swiper is used to give space between two slides.
4 Multiple Swipers

This swiper uses more than one swipers on a single page.
5 Nested Swipers

It is the combination of vertical and horizontal slides.
6 Custom Controls

It is used for custom controls to choose or swipe any slide.
7 Lazy Loading

It can be used for multimedia file, which takes time to load.