swiper js中显示奇怪的点答案

【问题标题】：Strange dots are displayed in swiper jsswiper js中显示奇怪的点
【发布时间】：2021-12-30 12:58:10
【问题描述】：

我正在试验 Swiper js 库。我设法让它工作。但是当幻灯片从最后一张换到第一张时会显示一些奇怪的点，并且当 loop 属性设置为 true 时会出现问题。

这里是html代码。请注意，循环属性设置为 true。

<!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>
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        .swiper {
            width: 600px;
            height: 300px;
        }
        .page1 {
            width: 100%;
            height: 100%;
            background-color: #443321;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>


</head>
<body>
    <!-- Slider main container -->
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
            <div class="page1">

            </div>
        </div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
    
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    
    </div>

    <script type="text/javascript" src="./index.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            loopedSlides: 50,
            observer: true,
            obsereParents: true,
            slidesPerView: 1,
            spaceBetween: 30,

            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        });
    </script>    
</body>
</html>

【问题讨论】：

您的代码在没有... 的情况下运行良好。您要么没有发布所有内容，要么是另一个问题。

标签： swiper

【解决方案1】：

<div class="swiper-slide">Slide 3</div>
    ...

我也有这个问题。您的 html 代码在 Slide 3 元素之后生成这些点。当您复制/粘贴代码 sn-p 时，看起来这三个点可能已经存在。删除它们，您的问题就会消失

【讨论】：