【Framework7多个滑动器】你可以在一个页面上轻松添加多个滑动器。
例
<
!DOCTYPE html>
<
html>
<
head>
<
meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<
meta name = "apple-mobile-web-app-capable" content = "yes" />
<
meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<
title>
Multiple Swipers<
/title>
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<
/head>
<
body>
<
div class = "views">
<
div class = "view view-main">
<
div class = "pages">
<
div data-page = "home" class = "page navbar-fixed">
<
div class = "navbar">
<
div class = "navbar-inner">
<
div class = "left">
<
/div>
<
div class = "center">
Multiple Swipers<
/div>
<
div class = "right">
<
/div>
<
/div>
<
/div>
<
div class = "page-content">
<
div class = "content-block-title">
1 Slide Per View, 50px Between<
/div>
<
div class = "swiper-container swiper-1">
<
div class = "swiper-pagination">
<
/div>
<
div class = "swiper-wrapper">
<
div class = "swiper-slide">
<
span>
Slide 1<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 2<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 3<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 4<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 5<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 6<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 7<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 8<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 9<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 10<
/span>
<
/div>
<
/div>
<
/div>
<
div class = "content-block-title">
2 Slides Per View, 20px Between<
/div>
<
div class = "swiper-container swiper-2">
<
div class = "swiper-pagination">
<
/div>
<
div class = "swiper-wrapper">
<
div class = "swiper-slide">
<
span>
Slide 1<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 2<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 3<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 4<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 5<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 6<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 7<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 8<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 9<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 10<
/span>
<
/div>
<
/div>
<
/div>
<
div class = "content-block-title">
3 Slides Per View, 10px Between<
/div>
<
div class = "swiper-container swiper-3">
<
div class = "swiper-pagination">
<
/div>
<
div class = "swiper-wrapper">
<
div class = "swiper-slide">
<
span>
Slide 1<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 2<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 3<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 4<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 5<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 6<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 7<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 8<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 9<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 10<
/span>
<
/div>
<
/div>
<
/div>
<
div class = "content-block-title">
Vertical, 0px Between<
/div>
<
div class = "swiper-container swiper-vertical">
<
div class = "swiper-pagination">
<
/div>
<
div class = "swiper-wrapper">
<
div class = "swiper-slide">
<
span>
Slide 1<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 2<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 3<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 4<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 5<
/span>
<
/div>
<
/div>
<
/div>
<
div class = "content-block-title">
Slow speed<
/div>
<
div class = "swiper-container swiper-slow">
<
div class = "swiper-pagination">
<
/div>
<
div class = "swiper-wrapper">
<
div class = "swiper-slide">
<
span>
Slide 1<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 2<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 3<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 4<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 5<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 6<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 7<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 8<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 9<
/span>
<
/div>
<
div class = "swiper-slide">
<
span>
Slide 10<
/span>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js">
<
/script>
<
style>
.swiper-slide {background:#fff;
box-sizing:border-box;
border:1px solid #ccc;
line-height:120px;
text-align:center;
}.swiper-slide span {font-size:17px;
}.swiper-container {height:120px;
margin:0px 0 35px;
}<
/style>
<
script>
var myApp = new Framework7();
// 1 Slide Per View, 50px Betweenvar mySwiper1 = myApp.swiper('.swiper-1', {pagination:'.swiper-1 .swiper-pagination', spaceBetween: 50});
// 2 Slides Per View, 20px Betweenvar mySwiper2 = myApp.swiper('.swiper-2', {pagination:'.swiper-2 .swiper-pagination', spaceBetween: 20, slidesPerView: 2});
// 3 Slides Per View, 10px Betweenvar mySwiper3 = myApp.swiper('.swiper-3', {pagination:'.swiper-3 .swiper-pagination', spaceBetween: 10, slidesPerView: 3});
// Vertical, 0px Betweenvar mySwiperVertical = myApp.swiper('.swiper-vertical', {pagination:'.swiper-vertical .swiper-pagination', direction: 'vertical'});
// Slow speedvar mySwiperSlow = myApp.swiper('.swiper-slow', {pagination:'.swiper-slow .swiper-pagination', speed: 600});
<
/script>
<
/body>
<
/html>
立即测试
推荐阅读
- Framework7延迟加载
- Framework7默认的滑动与分页
- Framework7自定义控件
- Framework7选项卡JavaScript事件
- Framework7滑动滑块
- 从导航栏切换选项卡
- 使用JavaScript的Framework7显示选项卡
- Framework7可滑动标签
- Framework7内联选项卡