Swiper的默认轮播效果slide在垂直轮播的时候可以像，水平轮播那样反向吗

Question

​
我目前遇到的问题是，水平轮播的时候只需要给Swiper的div容器加个属性就可以实现反向轮播，但是垂直方向我找了很多资料，都说不支持垂直反向轮播，所以现在很烦，自己写的轮播效果因为项目使用的版本很低，所以会有一些bug，只能采用Swiper或者其他插件来实现，请问大家Swiper怎么垂直反向轮播。

 var swiper = new Swiper(".swiper-banner", {
                direction: "vertical",
                speed: 3000,
                loop: true,
                effect: "slide",
                autoplay: task.stay_time * 1000,
                // 监听滑动结束事件
                onSlideChangeEnd: function (swiper1) {
                    // 播放完毕
                    if (swiper1.activeIndex === swiper1.slides.length - 2) {
                      
                        swiper1.stopAutoplay();

                        // 调用回调函数
                        setTimeout(function () {
                            swiper1.destroy(true, true);
                            callback();
                            //   console.log("end");
                        }, task.stay_time * 1000)

                    }
                }
            });

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

基于您提供的现有信息，以下是解决Swiper垂直轮播反向效果的具体步骤：

1. 检查Swiper版本：

   • 确定您使用的Swiper版本是否支持垂直反向轮播。如果不支持，考虑升级到最新版本。

2. 修改Swiper配置：

   • 在Swiper的配置中，尝试添加或修改loop和effect属性，以查看是否支持垂直反向轮播。

3. 自定义事件处理：

   • 利用您已经设置的onSlideChangeEnd事件，添加逻辑来实现垂直反向轮播。以下是修改后的代码示例：

var swiper = new Swiper(".swiper-banner", {
    direction: "vertical",
    speed: 3000,
    loop: true,
    effect: "slide",
    autoplay: task.stay_time * 1000,
    // 监听滑动结束事件
    onSlideChangeEnd: function (swiper1) {
        // 播放完毕
        if (swiper1.activeIndex === 0) {
            // 当滑动到第一张时，手动设置为最后一张
            swiper1.slideTo(swiper1.slides.length - 1, 0);
        } else if (swiper1.activeIndex === swiper1.slides.length - 1) {
            // 当滑动到最后一张时，手动设置为第一张
            swiper1.slideTo(0, 0);
        }
    }
});

1. 测试和调整：

   • 在您的项目中应用上述修改，并进行测试以确保轮播效果符合预期。
   • 如果效果不理想，可能需要进一步调整代码或查找其他解决方案。

2. 查阅文档和社区：

   • 如果上述方法无法解决问题，查阅Swiper的官方文档，搜索是否有关于垂直反向轮播的相关说明或示例。
   • 访问社区论坛，看是否有其他开发者分享过类似问题的解决方案。

3. 考虑替代方案：

   • 如果Swiper确实不支持您需要的功能，考虑使用其他轮播库，如Slick Slider或Owl Carousel，这些库可能支持垂直反向轮播。

请注意，由于我无法访问您的项目环境和具体版本信息，上述代码仅供参考。您可能需要根据实际情况进行调整。