全屏Swiper

最新推荐文章于 2024-01-30 13:50:11 发布

TCorners

最新推荐文章于 2024-01-30 13:50:11 发布

阅读量2.4k

点赞数 2

分类专栏： js 文章标签： swiper

本文链接：https://blog.csdn.net/qq_40619526/article/details/80434636

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏Swiper</title>
    <link href="https://cdn.bootcss.com/Swiper/4.2.6/css/swiper.min.css" rel="stylesheet">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .swiper-container {
            width: 100%;
            height: 768px;
        }
        .Slide1{
            background: seagreen;
        }
        .Slide2{
            background: skyblue;
        }
        .Slide3{
            background: pink;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="Slide1">Slide1</div>
            </div>
            <div class="swiper-slide">
                <div class="Slide2">Slide2</div>
            </div>
            <div class="swiper-slide">
                <div class="Slide3">Slide3</div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.2.6/js/swiper.min.js"></script>
    <script type="text/javascript">
        var height = $(window).height();
        $(".swiper-slide").children().css("height",height);
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical',
            loop: true,//循环播放
            autoplay : {
                delay : 1000,//自动播放延迟1s
            },
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable : true,//可点击
            },
            mousewheel: true,//鼠标滚轮控制
        })
    </script>
</html>

TCorners

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全屏Swiper

直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;全屏Swiper&lt;/title&gt; &lt;link href="https://cdn.bootcss.co
复制链接

扫一扫