Swiper实现两种常用轮播图

效果图：

市面上实现的网页中的轮播图大多都是用Swiper实现的，主要就是这两种，其实没必要写这篇的，写这篇的目的.....emmm.....方便以后伸手使用和练习两个swiper......别打我。。

html：

<!DOCTYPE html>
<html>
<head><title>实用轮播图</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="./swiper.min.css"><link rel="stylesheet" type="text/css" href="./test19.css"><script src="./swiper.min.js"></script>
</head>
<body><div class="lunbo-leave fluidwidth"><div class="swiper-container swiper1-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div></div><!-- Add Pagination --><div class="swiper-pagination swiper-p1"></div></div></div><div class="lunbo-leave fluidwidth"><div class="swiper-container swiper2-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div><div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div></div><!-- Add Pagination --><div class="swiper-pagination swiper-p2"></div></div></div><script type="text/javascript" src="./test19.js"></script>
</body>
</html>

css：

/*----------------------轮播图公共样式层-----------------------*/
.lunbo-leave {}
.swiper-imagesize {max-width: 1280px;width: 100%;min-width: 1100px;/*height: 700px;*/
}
.swiper-wrapper {max-width: 1280px;width: 100%;min-width: 1100px;/*height: 700px;*/
}
.swiper-pagination-bullet-active {background-color: #A0100F;
}
.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;
}
/*------------------------轮播图1层---------------------------*/
.swiper1-container {max-width: 1280px;width: 100%;min-width: 1100px;/*height: 700px;*/
}
/*------------------------轮播图2层---------------------------*/
.swiper2-container {max-width: 1280px;width: 100%;min-width: 1100px;/*height: 700px;*/
}

js：

var swiper1 = new Swiper('.swiper1-container', { // 区分容器centeredSlides: true,loop: true,autoplay: {delay: 2500,disableOnInteraction: false,},pagination: {el: '.swiper-p1',clickable: true,},});
var swiper2 = new Swiper('.swiper2-container', { // 区分容器effect: 'fade',loop: true,centeredSlides: true,autoplay: {delay: 2500,disableOnInteraction: false,},pagination: {el: '.swiper-p2',clickable: true,},});

素材包：click here

Swiper实现两种常用轮播图相关推荐

微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
swiper制作3D效果的轮播图
需要配合使用最新的swiper 4.0 使用.具体效果可自己修改~ css: .student-swiper {position: relative;}.student-swiper-containe ...
微信小程序种利用轮播图实现tab栏切换
js文件 navList: ['推荐', '视频', '热点', '娱乐'],idx: 0},handleChange (e) {var idx = e.target.dataset.idxthis. ...
小程序种的轮播图高度的算法
height: 原图的height * 现在手机屏幕尺寸的width/ 原图的width; <swiper indicator-dots autoplay circular><swi ...
通过swiper插件制作旋转木马轮播图
实现效果: swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下 ...
微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程
1.swiper组件是干嘛的? 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 2.swiper和swiper-itme怎么使用? 接下来我尝试教大家怎么使用swipe ...
微信小程序之swiper轮播图
微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择轮播图几乎是每一个网站.app必有得一个展示区,用于醒目自己的特点.特色.了解微 ...

Swiper实现两种常用轮播图

Swiper实现两种常用轮播图相关推荐

最新文章

热门文章