swiper

最新推荐文章于 2025-03-17 17:58:34 发布

dqf_jejz

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量319

点赞数

文章标签： Swiper 轮播效果动态数据初始化延迟加载

本文链接：https://blog.youkuaiyun.com/m0_64637910/article/details/125547656

版权

引入swiper文件

使用swiper做轮播效果

使用动态swiper会导致swiper初始化过早，给swiper封装一个函数，再做一个定时器，模拟从后端接收数据的过程，在定时器末尾写入给swiper封装的函数，可以解决这个问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="/swiper8/swiper-bundle.min.css">
    <style>
        .dqf {
            height: 500px;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        header,
        footer {
            text-align: center;
        }

        .swiper-button-next {
            position: absolute;
            right: 0;
            top: 350px;
        }

        .swiper-button-prev {
            position: absolute;
            left: 0;
            top: 350px;
        }

        .swiper-horizontal>.swiper-pagination-bullets {
            bottom: 240px;
        }
    </style>
</head>

<body>
    <header>
        <h1>11</h1>
    </header>
    <div class="swiper-container dqf">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide">11111</div>
            <div class="swiper-slide">22222</div>
            <div class="swiper-slide">33333</div> -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>

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

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
    <!-- </div> -->
    <!-- 导航等组件可以放在Swiper容器之外 -->
    <footer>
        <h1>yyds</h1>
    </footer>
    <script src="/swiper8/swiper-bundle.min.js">
    </script>

    <script>

        // swiper初始化过早
        setTimeout(() => {
            var list = ['45adee1aa5de0f9213d789892502cc4.jpg', '139ba566a8d10305bf21a2f985b95f4.jpg', '微信图片_20220630173553.jpg']
            var newlist = list.map(item =>
                `<div class="swiper-slide"><img src='${item}'></img></div>`)
            console.log(newlist.join())
            var owrapper = document.querySelector('.swiper-wrapper')
            owrapper.innerHTML = newlist.join()
            init()
            //.map把一个字符串 隐射成其他字符串
        }, 2000)
        function init() {
            new Swiper(".dqf", {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
                pagination: {
                    el: '.swiper-pagination',
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
            })
        }
    </script>
</body>


</html>