已解决首页轮播图显示和操作设计问题

MrXiaoM · 2025/08/01

现在的首页轮播图，显示和操作起来都非常奇怪，总的来说，有以下问题

不按比例显示

轮播图的申请规范里有提到需要一张1870*600的图片，但是实际上，轮播图是不按比例显示的。
最初我是在手机端和电脑端的比例差异中发现的，后来不经意间调了下开发者工具的大小，发现无论在手机端还是电脑端，这个问题都存在。

从我录制的这个 gif 来看，可以很明显地看出来，随着窗口大小的变化，轮播图的比例在发生不同程度的拉伸。
字体的拉伸对于平面设计来说是大忌。

使用油猴脚本实现的轮播图按比例变化

JavaScript：

var rate = 1870.0 / 600.0;

function fitRateByWidth(element) {
    element.style.height = (element.clientWidth / rate) + 'px';
}
function doResize() {
    document.querySelectorAll('[data-widget-key="forum_slide"] .swiper-slide').forEach(fitRateByWidth);
    fitRateByWidth(document.querySelector('[data-widget-key="forum_slide"]'));
    fitRateByWidth(document.querySelector('.swiper-container-forum_slide'));
}

window.addEventListener('resize', (event) => doResize());
XF.ready(doResize);

我不太了解 swiperjs 是否有相关的参数可以保持轮播图比例，但是以上方案是可行的。

手动翻页无法首尾循环

在自动翻页的时候，播放到最后一张轮播图，下一张会自动回到第一张。
但是通过左右的翻页按钮手动翻页时，翻到最后一张时，下一页按钮的鼠标指针依然是 cursor: pointer，但点击之后不会回到第一页，而是跟这个按钮不存在一样，点进了轮播图的链接。
同理，在第一页往前翻也是一样的。

至于这个问题，我感觉是后端的变量替换没有到位，因为我看 <head> 里初始化轮播图的 <script> 是这样的（稍微做了点格式化）

JavaScript：

XF.ready(() => {
    // 很明显，这里的 {widget.key} 是有问题的，实际应该是 forum_slide
    let tforum_slide = document.querySelectorAll('[data-widget-key="{widget.key}"] .swiper-slide').length;
    let cforum_slide = {
        loop: tforum_slide > 1, // tforum_slide == 0，导致 loop 为 false
        spaceBetween: 10,
        autoplay: true,
        delay: 500,
        navigation: {
            nextEl: ".swiper-button-next-forum_slide",
            prevEl: ".swiper-button-prev-forum_slide"
        }
    };
    if (tforum_slide > 1) {
        cforum_slide.pagination = {
            el: ".swiper-pagination-forum_slide"
        }
    };
    new Swiper(".swiper-container-forum_slide", cforum_slide);
})

由于改 index 的 <script> 标签极其麻烦，~~暂未验证修正此处是否可以修复这个问题。~~通过在 prototype.init 强制替换 loop 的值验证发现，可以修复这个问题。

Sbaoor · 2025/08/01

确实是这样

YYT · 2025/08/11

已反馈技术人员进行优化

Mcdowell160 · 2025/08/26

感谢楼主提供的相关代码作为重要参考！ :点赞:

已修复轮播图不按比例显示，和手动翻页无法实现首尾回绕的问题。

已解决首页轮播图显示和操作设计问题

不按比例显示

手动翻页无法首尾循环

相似主题

主题

资源

回复

在线会员

我们重视您的隐私

已解决 首页轮播图显示和操作设计问题

不按比例显示​

手动翻页无法首尾循环​

相似主题

主题

资源

回复

在线会员

我们重视您的隐私

已解决首页轮播图显示和操作设计问题

不按比例显示

手动翻页无法首尾循环