用swiper写一个能够看到两边图片的轮播图

2019年度将近,个人觉得是发现了最为流行的轮播图。

如图所示“:

 

正如图所见的事例,那么我们看到的是两边留住的空白以及上一张的图片,和下一张的图片都有所展示

其实现的方式为,引入swiper.js

// JavaScript Document

            var mySwiper = new Swiper('.swiper-container', {

                slidesPerView: 'auto',

                centeredSlides: true,

                watchSlidesProgress: true,

                paginationClickable: true,

                slidesPerView: 1.1,

                spaceBetween: 10,

                loop: true,

                autoplay: true

            });

ok这里的便结束喽。一定要看文档哦。。。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
好的,以下是使用Swiper插件生成一个5张图片轮播的网页源码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Swiper图片轮播</title> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <style> /* 设置轮播容器的高度 */ .swiper-container { width: 100%; height: 500px; } /* 设置轮播图的样式 */ .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img1.jpg" alt="图片1"></div> <div class="swiper-slide"><img src="img2.jpg" alt="图片2"></div> <div class="swiper-slide"><img src="img3.jpg" alt="图片3"></div> <div class="swiper-slide"><img src="img4.jpg" alt="图片4"></div> <div class="swiper-slide"><img src="img5.jpg" alt="图片5"></div> </div> <!-- 添加左右箭头和分页器 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-pagination"></div> </div> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { // 自动播放 autoplay: true, // 循环轮播 loop: true, // 分页器 pagination: { el: '.swiper-pagination', clickable: true, }, // 左右箭头 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> </body> </html> ``` 在这个示例中,我们将Swiper插件的CSS和JavaScript文件链接到我们的HTML文档中。我们在HTML中创建了一个`div`元素,并将其设置为Swiper容器,包含了5个`div`元素,每个`div`元素中包含一个`img`元素,用于显示轮播的图片。我们还添加了左右箭头和分页器,这些可以通过Swiper插件进行配置。 JavaScript代码部分实例化了Swiper对象,并对其进行了一些配置,例如自动播放、循环轮播、分页器和左右箭头等。这些选项可以根据具体需求进行配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhangjianshanshan

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值