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

原创

已于 2022-03-26 12:07:37 修改 · 7.6k 阅读

于 2022-03-26 12:05:51 首次发布

实现效果：
请添加图片描述

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="

标签

#前端 #html5 #css3

最低0.47元/天解锁文章