Swiper4.3.3 制作轮播图

想要的轮播图效果如下：(gif制作可参考这篇文章)

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css"><style>.d-duSwiper {width: 100vw;height: 43.4667vw;top: 22vw;left: 0;position: absolute;}.d-duSwiper .carousel-box {position: relative;width: 100%;overflow: hidden;opacity: 1;transform-origin: 0 0 0;transform: scale(1, 1);}.d-duSwiper .carousel-box::before {content: "";padding-top: 44%;display: block;}.d-duSwiper .list-carousel {position: absolute;left: 0;top: 0;letter-spacing: -0.04rem;white-space: nowrap;float: left;transition: name 1.5s ease;transition-property: transform;transition-duration: 0ms;transform-origin: 0 0 0;width: 100%;height: 100%;}.d-duSwiper .list-carousel .list-carousel-li {position: relative;width: 68vw;height: 39.7333vw;border: 2px solid #bd9d61;border-radius: 2vw;overflow: hidden;}.d-duSwiper .list-carousel .list-carousel-li .d-pic {width: 68vw;height: 39.7333vw;top: 0;left: 0;position: absolute;}.d-duSwiper .list-carousel .list-carousel-li .d-pic img {width: 100%;height: 100%;}.d-duSwiper .list-carousel .list-carousel-li .d-msg {width: 68vw;height: 7.3333vw;top: 33vw;left: 0;position: absolute;background: rgba(0,0,0,0.5);}.d-duSwiper .list-carousel .list-carousel-li .d-msg p {text-align: center;width: 68vw;color: #fff;letter-spacing: .1vw;line-height: 7.3333vw;font-size: .13rem;}</style>
</head>
<body><div class="d-duSwiper"><div class="swiper-container carousel-box" id="diySwiper"><div id="carouselList" class="swiper-wrapper list-carousel"><div class="swiper-wrapper list-carousel" id="carouselList"><a rseat="201204_mcdonalds_18" href="https://www.iqiyi.com/v_arpeq20pbs.html"><div rseat="201204_mcdonalds_18" class="d-pic"><img rseat="201204_mcdonalds_18" src="https://pic1.iqiyipic.com/rms/resource/image/20201215/1ac9e805e3fe4963ad47c87f3f12f35f.jpg" alt=""></div> <div rseat="201204_mcdonalds_18" class="d-msg"><p rseat="201204_mcdonalds_18">我倒要看看，这使命的背后到底是什么</p></div></a></div><div class="swiper-slide list-carousel-li"><a href="https://www.iqiyi.com/v_a94f7ii6hc.html"><div class="d-pic"><img src="https://pic1.iqiyipic.com/rms/resource/image/20201218/407adf0a7ba74c1b8468ce977ba36e5f.jpg" alt=""></div> <div class="d-msg"><p>想坚持理想，就得舍得为之付出代价</p></div></a></div><div class="swiper-slide list-carousel-li"><a href="https://www.iqiyi.com/v_1f6101fgxeo.html"><div class="d-pic"><img src="https://pic1.iqiyipic.com/rms/resource/image/20201223/983d3c0993bd494ab50fe437e6e6b9d3.jpg" alt=""></div> <div class="d-msg"><p>这座城市，充满了可能性 </p></div></a></div><div class="swiper-slide list-carousel-li"><a href="https://www.iqiyi.com/v_wigb8hqn4c.html"><div class="d-pic"><img src="https://m.iqiyipic.com/common/lego/20201215/dff986b8dd714e9ea8a58db39d050e51.jpg" alt=""></div><div class="d-msg"><p>要勇于面对挑战，不要找任何借口</p></div></a></div></div></div></div>
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
<script>let clientW = $(window).width();let depth = parseInt(360 * clientW / 375);let stretch = parseInt(-68 * clientW / 375);let swiper2 = new Swiper('#diySwiper', {effect: 'coverflow',grabCursor: true,centeredSlides: true,slidesPerView: 'auto',observer: true,observeParents: true,loop: true,autoplay: {delay: 2000},coverflowEffect: {rotate: 0,stretch: stretch,depth: depth,modifier: 1,slideShadows: false,}});
</script>
</html>

Swiper4.3.3 制作轮播图相关推荐

微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
Axure使用动态面板制作轮播图
对于动态面板的使用我想每一个学习axure的小伙伴都会接触到,聪明的你可能会想,能不能利用动态面板制作出轮播图的效果能?不用怀疑 ,利用动态面板也是能做出好看的轮播图的效果的.那么,下边我就来分享一下 ...
制作轮播图的几种方式
目录 css制作轮播图思路 animation详解具体制作 js制作轮播图思路内容详解 css制作轮播图思路主要通过一个展示盒子,一个图片储存盒子,展示盒子的大小即为轮播图想要展示图片的大 ...
【Axure RP9 制作轮播图】
Axure RP9 制作轮播图说在前面:由于版本差异,在Axure学习过程中遇到一点点麻烦,网上没找到答案,最终自己弄出来了,在此记录一下.(课程上是axure8,我用的axure9,个别地方有些差 ...
利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
制作轮播图思路 ~ 使用JS做一个轮播图，先在脑海里捋一捋逻辑，我的思路是这样的，看图啦：
制作一个功能比较全的轮播图,应该怎么下手呢?我的思路比较中规中矩,如果不知道怎么下手的,看看我的思路吧,看完一定要着手试试哦~
Axure知识点：如何制作轮播图效果（以泉州师范学院官网为例）
摘要:微信搜索[三桥君] 使用软件:Axure RP 9软件说明:实现方式不唯一,这里给出三桥君制作的一种方式. 一.问题本篇文章三桥君主要解决关于轮播图交互效果的设置,以泉师新闻轮播图为例. 该 ...
html图片轮播怎么做的,CSS3制作轮播图的一种方法
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种下面是style部分: 这几行都能明白吧 *{margin:0;padding:0;} a{text-decoration:n ...
教你用JavaScript制作轮播图
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时 ...

Swiper4.3.3 制作轮播图

Swiper4.3.3 制作轮播图相关推荐

最新文章

热门文章