如何解决Swiper JS 幻灯片冻结
我目前正在使用 swiper js 库。我制作了垂直链接的幻灯片。每张幻灯片都占用屏幕的大小。 每次我刷新页面时,只要我到达倒数第二张幻灯片,当我出现时它就会冻结一点。我有多少张幻灯片并不重要。 它只发生在我第一次刷新后到达它时,之后一切都在流动。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<main class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<nav>
<ul id="navbar-ul" style="color: black;">
<li class="navbar-li-l">
<a href="" class="navbar-a"><img src="images/white-logo.png" class="logo"/></a>
</li>
<li class="navbar-li-r"><a href="shopping_cart.html" class="navbar-a" style="color: black;">panier</a></li>
<li class="navbar-li-r">|</li>
<li class="navbar-li-r"><a href="login.html" class="navbar-a" style="color: black;">se connecter</a></li>
</ul>
</nav>
<div class="grid-article">
<div class="left-grid">
<img src="images/pique.jpg" />
</div>
<div class="right-grid">
<h2>
SWEAT À CAPUCHE
</h2>
<p class="price-article">
45,95 eur
</p>
<p class="details-article">
blanc cassé - 4087/328
</p>
<p class="infos-article">
Sweat ample avec col à capuche et manches longues. Poches latérales sur les hanches. Finitions côtelées. Impression sur le devant graphisme Herbert Bayer © The Josef and Anni Albers Foundation.
</p>
<hr />
<ul id="size-ul">
<li class="size-li">XS</li>
<li class="size-li">S</li>
<li class="size-li">M</li>
<li class="size-li">L</li>
<li class="size-li">XL</li>
<li class="size-li">XXL</li>
</ul>
<a href="" class="add-btn">ajouter</a>
</div>
</div>
</div>
*3 the same slide
</div>
</main>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container');
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。