Html Swiper，仅显示一张幻灯片_Html_Css_Swiper

Html Swiper，仅显示一张幻灯片

html css

Html Swiper，仅显示一张幻灯片,html,css,swiper,Html,Css,Swiper,我刚开始使用swiper，我有一个小问题，我当前的代码如下。问题是，我只希望用户一次看一张幻灯片，现在我看到一张半幻灯片，有时是两张半幻灯片，这有点时髦。有人知道我做错了什么吗？示例：这也有点破坏了我的利润，所以真的很难看 <body class="font-newsCycle"> <nav class="bg-black text-white px-4 py-3 flex items-center container max-w-full&

我刚开始使用swiper，我有一个小问题，我当前的代码如下。问题是，我只希望用户一次看一张幻灯片，现在我看到一张半幻灯片，有时是两张半幻灯片，这有点时髦。有人知道我做错了什么吗？示例：这也有点破坏了我的利润，所以真的很难看

<body class="font-newsCycle">

<nav class="bg-black text-white px-4 py-3 flex items-center container max-w-full">

    <img src="/img/logo_small.png" alt="" loading="lazy">
    <a href="#" class="font-bold pl-2 text-green">Huidige voorraad</a>
</nav>

    <div class="container swiper-container">
        <div class="swiper-wrapper">
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 0</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 1</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 2</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 3</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
            <div class="max-w-sm rounded overflow-hidden shadow-lg m-4 mt-4 swiper-slide">
                <img class="w-full" src="/img/red_charm.jpg" alt="The red charm flower">
                <div class="text-center m-4">
                    <div class="text-green font-bold text-xl ">Red Charm 4</div>
                    <div class="text-black font-light ">Type: plant</div>
                    <div class="text-black font-light ">Prijs: 0,70</div>
                    <div class="text-black font-light ">Maat: 2/3 N</div>
                    <div class="text-black font-light ">Huidige voorraad: 1500</div>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>

    </div>


<!-- JavaScript -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
</script>
</body>```


红色魅力0
类型：植物
Prijs:0,70
平均气温：北纬2/3度
威迪格·沃拉德：1500
红色魅力1
类型：植物
Prijs:0,70
平均气温：北纬2/3度
威迪格·沃拉德：1500
红色魅力2
类型：植物
Prijs:0,70
平均气温：北纬2/3度
威迪格·沃拉德：1500
红色魅力3
类型：植物
Prijs:0,70
平均气温：北纬2/3度
威迪格·沃拉德：1500
红色魅力4
类型：植物
Prijs:0,70
平均气温：北纬2/3度
威迪格·沃拉德：1500
var swiper=新的swiper（“.swiper容器”{
幻灯片视图：1，
空间期:30,，
中心幻灯片：对，
分页：{
el:“.swiper分页”，
可点击：正确，
},
});
```

我看到您忘记发送CSS部分，我认为问题来自于此（因此我创建了我的）。因为我用相同的脚本部分实现了一个替代Swiper，它可以正常工作


Swiper演示
html，
身体{
位置：相对位置；
身高：100%；
}
身体{
背景：#eee；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
字体大小：14px；
颜色：#000；
保证金：0；
填充：0；
}
.swiper容器{
宽度：100%；
身高：100%；
}
.滑梯{
文本对齐：居中；
字号：18px；
背景：#fff；
/*将幻灯片文本垂直居中*/
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
-webkit内容：中心；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
-webkit对齐项目：居中；
对齐项目：居中；
}
幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
幻灯片6
幻灯片7
幻灯片8
幻灯片9
幻灯片10
var swiper=新的swiper（“.swiper容器”{
幻灯片视图：1，
空间期:30,，
中心幻灯片：对，
分页：{
el:“.swiper分页”，
可点击：正确，
},
});