如何用单个右箭头键在SwiperJS中切换滑动方向？

问题描述 #

使用Slick轮播时，仅保留一个自定义箭头按钮，点击时按钮旋转180度，同时切换滑动方向（初始向右，旋转后向左）。目前按钮旋转正常，但滑动方向始终为向右，因为仅配置了nextArrow并隐藏了prevArrow，需要实现单按钮交替触发左右滑动。

解决方案 #

核心思路是不依赖Slick默认的箭头点击逻辑，而是自行监听按钮点击事件，根据按钮的状态（是否带有active类）调用Slick的滑动方法，同步切换按钮的旋转样式。

修改后的代码 #

JavaScript 代码

$(document).ready(function () {
    // 初始化Slick轮播，移除箭头内置的onclick事件
    const $slider = $('.slider').slick({
        nextArrow: '<svg id="right-swipe-arrow" class="nextArrowBtn rotate180" width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="31" cy="31" r="31" fill="white"/><path d="M35.1102 21L45 31.0171L35.1102 41.0273" stroke="#EB6502" stroke-width="3" stroke-miterlimit="10"/><path d="M45 31.0176L16.949 31.0176" stroke="#EB6502" stroke-width="3" stroke-miterlimit="10"/></svg>',
        prevArrow: ' ',
        arrows: true,
        dots: false,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });

    // 获取箭头按钮元素
    const $arrowBtn = $('#right-swipe-arrow');

    // 绑定按钮点击事件
    $arrowBtn.on('click', function() {
        // 检查按钮当前状态
        const isActive = $(this).hasClass('active');
        
        // 根据状态调用对应滑动方法
        if (isActive) {
            $slider.slick('slickPrev');
        } else {
            $slider.slick('slickNext');
        }

        // 切换按钮旋转样式
        $(this).toggleClass('active');

        // 保留原逻辑：检测最后一页是否在视口，自动调整按钮状态
        checkLastSlideInView();
    });

    // 封装最后一页检测函数
    function checkLastSlideInView() {
        const element = document.getElementById("last-slide");
        if (!element) return;
        
        const rect = element.getBoundingClientRect();
        const isInViewport = rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth);

        // 最后一页在视口时，自动切换按钮为向左状态
        if (isInViewport) {
            $arrowBtn.addClass('active');
        }
    }

    // 页面加载时初始化检测一次
    checkLastSlideInView();
});

CSS 代码（保留原样式）

.rotate180 {
    transition: transform .2s;
}

.rotate180.active {
    transform: rotateZ(180deg);
}

关键说明 #

• 移除了箭头按钮上的onclick属性，改为通过jQuery绑定点击事件，完全接管滑动逻辑。
• 点击按钮时根据active类判断方向：未激活时向右滑动，激活时向左滑动，同步切换旋转样式。
• 保留了原有的最后一页检测逻辑，确保用户滑到最后一页时按钮自动切换为向左状态。
• 将Slick实例赋值给变量$slider，方便调用其API方法。

内容的提问来源于stack exchange，提问作者Amit Pathak