使用 Slick Slide 觸發按鈕單擊時的滑塊不起作用？

Question

我一直在嘗試使用 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/

Answer 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

Answer 2

我已經檢查了共享 jsfiddle 鏈接中的 UI。 滑塊不適用於它所應用的對象。 請添加 slick js CDN。

您可以像下面這樣使用slickGoTo ：

$(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" ).slick('slickGoTo',indexVal);
    indexVal=indexVal+1;
    if(indexVal>2){
    indexVal=1;
    }
});

});