swiper在一个页面多个轮播图
<script>
var swiper = new Swiper('.swiper-container1', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination1',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script>
var swiper2 = new Swiper('.swiper-container2', {
slidesPerView: 4,
spaceBetween: 30,
slidesPerGroup: 4,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination2',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
注意: 千万不要直接更改swiper-container
应该在后面加上所起的名称
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide success-item"><img src="img/book3.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/book3.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination2"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
swiper在一个页面多个轮播图的更多相关文章
- swiper实现一个好看的轮播图
轮播是我们在编写页面中经常遇到的模块,所以网上也会有各种有有关轮播图的插件.今天忽然间看到了swiper上一个高颜值的轮播功能,顺便做一下分享. 首先页面在head内要先引用 swiper的css 和 ...
- 两个页面实现mui轮播图与选项卡结合
index.html页面 <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...
- Swiper 移动端全屏轮播图效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 微信小程序------轮播图
swiper 微信小程序实现轮播图,和网站,APP的效果差不多,代码少,效率高. 先来看看效果图: 主要用swiper + swiper-item来实现 <view class='swiper' ...
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
随机推荐
- Http2.0详解
前言 HTTP/1.1协议为现在网络提供了20年的支持.从那时起,网站已经从静态的.文本驱动的文档发展为交互式的.富媒体的应用程序.在此期间底层协议保持不变这一事实正好说明了它的通用性和能力.但随着网 ...
- ARTS起始篇
ARTS简要说明(每周需要完成以下四项): Algorithm:每周至少做一道 leetcode 的算法题,编程训练.刻意练习. Review:需要阅读并点评至少一篇英文技术文章,这个是四项里面对我最 ...
- nodejs安装+vue安装
一.nodejs安装 电脑win7的,nodejs V12.16.2以前的版本支持win7 nodejs下载地址: http://mirrors.nju.edu.cn/nodejs/v12.15.0/ ...
- Git的安装和配置 -入门
Git的版本有很多种,适应各种windows,IOS, Linux平台的安装. 我用的是linux Centos7的版本: 1. 安装命令用Yum, 非常简单就可以安装完毕. yum install ...
- C语言:n++ , ++n,n--,--n
#include <stdio.h> int main() { int a=3,x; x=(a++)+(++a)+(++a); // 3(4) 5(5) 6(6) printf(" ...
- C语言:#error命令,阻止程序编译
#error 指令用于在编译期间产生错误信息,并阻止程序的编译,其形式如下: #error error_message 例如,我们的程序针对 Linux 编写,不保证兼容 Windows,那么可以这样 ...
- 前端开发入门到进阶第三集【JavaScript中如何将html字符串转化为Jquery对象或者Dom对象】
https://www.cnblogs.com/mingjiatang/p/4746845.html
- 微信小程序云开发-云存储的应用-云相册
一.准备工作 1.创建数据库表images 2.设置数据库表images的权限 二.创建图片列表页 创建图片列表页imageList,用于展示图片列表.该页面具有跳转到图片上传页面.图片列表展示.删除 ...
- PAT甲级:1124 Raffle for Weibo Followers (20分)
PAT甲级:1124 Raffle for Weibo Followers (20分) 题干 John got a full mark on PAT. He was so happy that he ...
- 深入学习Netty(5)——Netty是如何解决TCP粘包/拆包问题的?
前言 学习Netty避免不了要去了解TCP粘包/拆包问题,熟悉各个编解码器是如何解决TCP粘包/拆包问题的,同时需要知道TCP粘包/拆包问题是怎么产生的. 在此博文前,可以先学习了解前几篇博文: 深入 ...