Swiper轮播器基础结构

最新推荐文章于 2021-10-18 16:25:53 发布

为谁攀登

最新推荐文章于 2021-10-18 16:25:53 发布

阅读量458

点赞数 1

分类专栏： # 工程化文章标签： bootstrap

本文链接：https://blog.csdn.net/shaixinxin/article/details/106109867

版权

工程化专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Swiper轮播器基础结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>

        <script src="js/swiper.min.js"></script>
</body>

<script type="text/javascript">
    window.onload = function() {
        var mySwiper = new Swiper ('.swiper-container', {
            //垂直滚动
            // direction: 'vertical',

            //无限循环
            // loop: true,

            // 如果需要分页器
            pagination: '.swiper-pagination',

            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',

            // 如果需要滚动条
            scrollbar: '.swiper-scrollbar',
        })
    }
</script>

</html>