使用 Slick Slide 触发按钮单击时的滑块不起作用？答案

【问题标题】：Trigger Slider on Button click with Slick Slide Not working?使用 Slick Slide 触发按钮单击时的滑块不起作用？
【发布时间】：2023-04-02 05:55:02
【问题描述】：

我一直在尝试使用 Slick Slide 库制作具有自定义按钮的滑块。当您触发“#slider-swap”时，幻灯片应更改为具有相同按钮（不同名称）的第二张幻灯片，该按钮将幻灯片切换回第一张。

我确实制作了自己的翻转盒，但最终坚持使用它，因为它无需加载任何额外的 JS 即可完成这项工作。

但是，当我触发按钮时，什么也没有发生。我不确定我做错了什么。我有一种感觉，它与 HTML 标记有关，而 slick 对要在其中滑动的内容感到困惑。

有什么想法吗？可能是因为太晚了，我从早上 8 点开始就一直在做这个项目：X

<div class="cs-challenge">
<div class="front"> 
    <div class="cs-heading chalbg">
        <i class="fal fa-bullseye"></i>
        <h3>The Challenge</h3>
    </div>
    <div class="cs-content solbg chaltxt">
        <ul>
            <li>An uneven fouling covered at least 70% of the convection bank finned 
            surface.</li>
            <li>Deposit was airborne hydro carbon dust and refractory fines – packed tightly
            between all rows of convection side fined heater tubes</li>
            <li>Severely restricted access to the convection section.</li>
            <li>To clean the tube side using studded pigging at the same time.</li>
        </ul>
        <a class="btn" id="slider-swap" href="#">Change Slide</a>
    </div>
</div>
<div class="back">
    <div class="cs-heading solbg">
        <i class="fal fa-bullseye-arrow"></i>
        <h3>Solution</h3>
    </div>
    <div class="cs-content chalbg soltxt">
        <ul>
            <li>An uneven fouling covered at least 70% of the convection bank finned 
            surface.</li>
            <li>Deposit was airborne hydro carbon dust and refractory fines – packed tightly
            between all rows of convection side fined heater tubes</li>
            <li>Severely restricted access to the convection section.</li>
            <li>To clean the tube side using studded pigging at the same time.</li>
        </ul>
        <a class="btn" id="slider-swap" href="#">Change Slide</a>
    </div>
</div> 
</div>

<script>
    $(document).ready(function() {
        $(".cs-challenge").slick({
          autoplay: false,
          speed: 250,
          slidesToShow: 1,
          slidesToScroll: 1,
          fade: true,
          arrows: false,
          cssEase: 'linear',
          infinite: true
        });

    });
    var indexVal=1;
    $("#slider-swap").click(function(e){
            e.preventDefault();
            $( ".cs-challenge" ).slickGoTo(indexVal);
            indexVal=indexVal+1;
            if(indexVal>2){
            indexVal=1;
            }
        });
</script>

这里是 jsfiddle： http://jsfiddle.net/no30vq8h/

【问题讨论】：

标签： javascript jquery html slider slick.js

【解决方案1】：

解决了。

因此，.slickGoTo 是一个折旧的功能，不再有效（afaik？）。我已将其更改为使用 indexVal 和 .data('id');和按钮的 html data-id 属性。

现在，当您触发按钮时，它将在每张幻灯片之间移动。

<a class="btn slider-swap" data-id="2" href="#">Challenge</a>

    //var indexVal=1;
jQuery(".slider-swap").click(function(e){
        e.preventDefault();
        var indexVal = jQuery(this).data('id');
        console.log(indexVal);
        jQuery( ".cs-challenge" ).slick('slickGoTo',indexVal);
        /*indexVal=indexVal+1;
        if(indexVal>2){
        indexVal=1;
        }*/

    });

这是最终代码。 https://pastebin.com/fH68Uw8W

【讨论】：