如何解决Idangero swiper - 页面重新加载后更改活动/中心幻灯片以显示活动页面
我们有一个包含多个类别页面的网站,我们使用 swiper 来显示所有类别,并允许用户在所有类别中滑动并从一个页面导航到另一个页面。我们希望将当前类别页面的幻灯片作为 swiper 的中心幻灯片。目前导航有效,但在页面重新加载时,第一张幻灯片始终是“活动幻灯片”,该幻灯片显示在 swiper 的左侧。
想要的情况: 因此,如果用户在 fakedomain.com/apples 上,则“中心”幻灯片应为 Apple;如果用户导航到 fakedomain.com/Bananas,则加载页面时 Bananas 幻灯片应位于中心。
因此类 swiper-slide-active 应该根据页面 url 和页面的重新加载进行更改。
我们的设置 WordPress 子主题的functions.php 中的HTML 代码示例
<div id="swiper_width_box" >
<div class="swiper-container" id="custom_html-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="https://fakedomain.com/potatoes">Potatoes</a></div>
<div class="swiper-slide"><a href="https://fakedomain.com/tomatoes">Tomatoes</a></div>
<div class="swiper-slide"><a href="https://fakedomain.com/broccoli">Broccoli</a></div>
<div class="swiper-slide"><a href="https://fakedomain.com/apple">Apples</a></div>
<div class="swiper-slide"><a href="https://fakedomain.com/bananas">Bananas</a></div>
<div class="swiper-slide"><a href="https://fakedomain.com/oranges">Oranges</a></div>
</div>
</div>
</div>
我们使用脚本根据屏幕宽度更改显示的幻灯片数量,效果很好,我们希望保持这种状态:
<script>
function myFunctionSwiper(x) {
if (x.matches) { // If media query matches
var swiper = new Swiper('.swiper-container',{
slidesPerView: 3,spaceBetween: 1,});
} else {
var swiper = new Swiper('.swiper-container',{
slidesPerView: 5,});
}
}
var x = window.matchMedia("(max-width: 768px)")
myFunctionSwiper(x) // Call listener function at run time
x.addListener(myFunctionSwiper) // Attach listener function on state changes
</script>
swiper 4.5.0,发布时间:2019 年 2 月 22 日。文件很长,但如果需要我们可以包含它。
如果您需要更多信息,请告诉我们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。