gpt4 book ai didi

javascript - 全宽 Swiper 在幻灯片左侧有一个间隙

转载 作者:行者123 更新时间:2023-12-03 06:59:32 30 4
gpt4 key购买 nike

带有大屏幕的 Windows 版 Chrome 上的 Swiper 插件存在问题。它在幻灯片左侧留下空白,我创建了一支笔来演示这一点:

https://codepen.io/anon/pen/BwMxWX

HTML:

<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>

CSS:
.swiper-slide {
width: 100vw;
height: 300px;
}

.swiper-slide:nth-child(1) { background-color: lightpink; }
.swiper-slide:nth-child(2) { background-color: lightblue; }
.swiper-slide:nth-child(3) { background-color: lightgrey; }

JS:
new Swiper(".swiper-container", {
loop: true
});

请记住,它仅在这些情况下发生。即使您在 Windows 上使用 Chrome,如果窗口大小小于(大约)2000 像素,也不会发生这种情况。

在插件的主页上有一个全宽示例,问题不存在,但我真的不明白是什么让它发生在首位。任何帮助将不胜感激。

更新:

我发现这只发生在使用默认的“幻灯片”效果时。将其更改为任何其他可以修复它,但这远非解决方案。

最佳答案

尝试设置slidesPerView: auto

const mySwiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: 'true'
},
slidesPerView: 'auto', /* Set me! */
});
更新:
在某些移动 Android 设备上,这个错误再次为我弹出(即使在进行了上述更改之后)。我在 swiper 的容器中添加了以下内容,它似乎已经为我修复了它:
overflow: hidden;

关于javascript - 全宽 Swiper 在幻灯片左侧有一个间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46830469/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com