swiper轮播图

avatar 2024年04月10日09:17:37 0 101 views
博主分享免费Java教学视频,B站账号:Java刘哥

昨天一个朋友要我在一个项目首页加一下某酒店网站的部分页面,主要难点是一些轮播图。看了html代码,不难判断是用的 swiper 插件。

这就去学下。

官网地址:https://www.swiper.com.cn/demo/index.html

这里举两个例子

一、一张轮播图、自动播放、循环

示例代码

<div class="swiper mySwiper1">
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/1.gif" alt=""></div>
        <span>XXXXXXX</span>
    </div>
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/2.gif" alt=""></div>
        <span>YYYYYY</span>
    </div>
</div>

<div>
    <img src="/assets/img/icon-left.png" alt="" class="prev-btn">
    <img src="/assets/img/icon-right.png" alt="" class="next-btn">
</div>

<script>
    var swiper = new Swiper(".mySwiper1", {
        initialSlide: 1,
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false
        },
        navigation: {
            nextEl: ".next-btn",
            prevEl: ".prev-btn",
        },
    });
</script>

 

二、同时显示多张轮播图

示例代码

<div class="swiper mySwiper1">
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/1.png" alt=""></div>
        <span>XXXXXXX</span>
    </div>
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/2.png" alt=""></div>
        <span>YYYYYY</span>
    </div>
    <div class="swiper-slide">
        <div><img src="/assets/img/slide/3.png" alt=""></div>
        <span>YYYYYY</span>
    </div>
</div>

<div>
    <img src="/assets/img/icon-left.png" alt="" class="prev-btn">
    <img src="/assets/img/icon-right.png" alt="" class="next-btn">
</div>

<script>
	var swiper = new Swiper(".mySwiper1", {
		initialSlide: 1,
		slidesPerView: 2,
		spaceBetween: 10,
		slidesPerGroup: 2,
		loop: true,
		loopFillGroupWithBlank: false,
		pagination: {
		    el: '.swiper-pagination',
		    clickable: true,
		},
		autoplay: {
		    delay: 3000,
		    disableOnInteraction: false
		},
		navigation: {
		    nextEl: ".next-btn",
		    nextEl: ".prev-btn"
		},
	});
</script>

 

三、效果图

经过一些css或者文字修改效果图如下

1、一次展示一张

 

2、同时展示多张

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292(群满)
  • weinxin
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0