通过swiper插件制作旋转木马轮播图

实现效果：

swiper插件准备
我们旋转木马轮播图的效果可以通过swiper插件轻松搞定

这种效果是不是和我们要做的很像呀，我们只要把它引入我们的案例就ok了

在swiper官网的获取swiper下下载swiper-5的压缩包然后解压

然后进入js文件夹，复制里面的swiper.min.js文件

然后粘贴到我们的项目文件夹中，同理再进入css文件夹，将里面的swiper.min.css复制到项目文件夹中

回到我们swiper插件的页面，单击这里的新窗口打开：

然后右击点击查看网页源代码：

因为我们要用这个swiper插件，就要用他们的结构，然后我们把源代码原封不动的全部复制粘贴到我们的html中，注意：一定要修改我们html页面里引入css和js文件的路径否则swiper.min.css和swiper.min.js引入不进来

我们运行代码可以发现和它演示的效果相同，但是我们不想要小圆点，我们应该怎么办？

我们在API文档中的pagination栏知道他是控制小圆点样式的，于是我们到我们的js部分，把pagination部分删掉就好：

这样我们再运行就没有小圆点了，那左右箭头我们想添加应该怎么办呢？
也简单，我们再去swiper里找个带箭头的样式：

这个样式就不错，我们继续在新窗口打开，查看源代码看看它多了什么东西

我们看到在js部分他多了一个navigation部分：

这个就是来实现左右箭头效果的，我们将它复制到我们的js里
注意：光添加了js不行，我们还得添加箭头的html结构，我们把小圆点的html语句删掉将这两句复制到我们的html里：

现在浏览一下效果：

为了达到我们想要的效果，我们下一步要修改html结构，插入我们的图片和文字：

我们运行一下效果，是这样的：

文字和图片在一行显示，因为它的样式里是flex布局，所以我们加一句：flex-direction:column;
然后我们把他原有的html,body那个样式删掉，再修改一下body样式里的东西：

再修改一下图片的尺寸：

加上上面这段代码在样式里，再修改一下文字的样式：

然后浏览一下是这样的效果：

然后我们把另外两张图片插进来：

但是我们应该中间的图片压盖住两侧的图片才行，那应该怎么办呢？

在我们的样式中，这段的意思就是当前所在的图片我们放大倍数是一倍，所以我们升级一下它的层级就行

因为我们要做的效果左右两个图片是有种半透明的效果，这怎么添加呢？
我们就在swiper-slide类下添加一句opacity:0.5; 就实现了，这代表所有图片都添加这个效果，然后我们再在.swiper-slide-active类下添加 opacity:1; 就ok了，这个类代表当前在中间的图片

然后我们再把宽度限制一下：

然后我们再修改一下html结构，因为要把左右箭头拿到外面，但是父盒子有一个overflow:hideen所以我们直接把箭头的盒子拿出来，因为箭头是绝对定位，所以我们再在外面添加一个focus父盒子并给他添加相对定位：

在js里这个slideperView是在我们的轮播图中显示几个图片的意思，这个数可以说是小数，在我们想要的效果里，左面是半个，中间显示全，右面显示半个，加一起是两个，所以这里要修改为2

这样我们的旋转木马轮播图就做完了，看一下最终的效果：

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Swiper demo</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><!-- Link Swiper's CSS --><link rel="stylesheet" href="swiper.min.css"><!-- Demo styles --><style>body {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;padding: 0;width: 750px;margin: 200px auto;}.swiper-container {width: 540px;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;flex-direction:column;/* 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;transition: 300ms;transform: scale(0.8);opacity: .5;}/*当前选中的图片*/.swiper-slide-active,.swiper-slide-duplicate-active{transform: scale(1);z-index: 999;opacity: 1;}.swiper-slide a {width: 338px;height: 376px;}.swiper-slide a img {width: 100%;height: 100%;}.swiper-slide p {width: 338px;font-size: 25px;margin-top: 24px;color: #333;}.focus {position: relative;}</style>
</head>
<body><!-- Swiper --><div class="focus"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href=""><img src="pic.png" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide"><a href=""><img src="3.jpg" alt=""></a><p>老师教你应对面试技巧</p></div><div class="swiper-slide"><a href=""><img src="ldh.jpg" alt=""></a><p>老师教你应对面试技巧</p></div></div><!-- Add Pagination --></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div><!-- Swiper JS --><script src="swiper.min.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper('.swiper-container', {slidesPerView: 2,spaceBetween: 30,centeredSlides: true,loop: true,navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script>
</body>
</html>

通过swiper插件制作旋转木马轮播图相关推荐

使用swiper_关于使用swiper制作web轮播图
我这个方法是很适用于小白的,利用swiper插件的应用.https://www.swiper.com.cn/这个是swiper中文官网的网址,上面有关于swiper的说明和使用方法.想要用到swipe ...
基于swiper实现旋转木马轮播图（适配移动端）
效果如下: 注:这里引用的是swiper3.0,swiper3.0无需加载公用库:Swiper无需加载任何公共库(如jquery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加 ...
一个不错的旋转木马轮播图特效
旋转木马轮播图特效共有五张图片,每张图片排列的位置是以中间为对称的.实现了想要的轮播效果,可用在网页制作中重要的展示. 效果如下: 主要代码如下: <!doctype html> < ...
js实现旋转木马轮播图
整个页面的文件结构如下图所示: html部分代码: <!DOCTYPE html> <html lang="en"> <head><met ...
Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图在html部分引入的myStyle.css文件部分代 ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？
一.需求分析这两天讨论了一个项目需求,刚开始是希望:轮播图中嵌入视频,轮播到视频自动播放,播放完毕切换下一张轮播,手动切换时暂停播放视频.后面因为自动播放没有声音,便暂时放弃了这个想法(有知道或了解 ...
微信小程序之视图容器（swiper）组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
如何通过 HTML+CSS+JS 制作焦点轮播图
序言 [版权声明]:狸狸高度重视原创作者或者著作权人应该享有的著作权,严格遵守国家相关法律法规,系该文章内所引用到的实例并非百分之百对原作品进行还原.因此,即便是您完完整整的复制并粘贴了本文章内所有的 ...

通过swiper插件制作旋转木马轮播图

通过swiper插件制作旋转木马轮播图相关推荐

最新文章

热门文章