使用 slick 和 jquery 返回上一个滑块答案

【问题标题】：Go back to the prevoius slide using slick and jquery使用 slick 和 jquery 返回上一个滑块
【发布时间】：2021-07-07 11:21:46
【问题描述】：

我的幻灯片包含多个对操作的调用，这些操作会在点击时打开不同的幻灯片

例如，如果用户在幻灯片 第 1 号 中并单击打开第 5 号幻灯片的按钮，则单击按钮返回应该返回到幻灯片 1号

这里是：LIVE DEMO

HTML

<div class="main">
  <div class="slider carousel">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
  </div>

  <div class="action">
    <a id="slide_3" href="#" data-slide="3">go to slide 3</a>
    <a id="slide_4" href="#" data-slide="4">go to slide 4</a>
    <a id="slide_5" href="#" data-slide="5">go to slide 5</a>    
    <a id="go-back" href="#" data-slide="5">GO BACK</a>
        
  </div>
</div>

var sliderIndex = 0;

$('.carousel').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
});

$("#slide_3").click(function() {
    $(".carousel").slick('slickGoTo', parseInt(2));
})

$("#slide_4").click(function() {
    $(".carousel").slick('slickGoTo', parseInt(3));
})

$("#slide_5").click(function() {
    $(".carousel").slick('slickGoTo', parseInt(4));
})

$('.carousel').on('afterChange', function(e, s, currentSlideIndex) {
    sliderIndex = currentSlideIndex-1;

});


$("#go-back").click(function() {

    $(".carousel").slick('slickGoTo', parseInt(sliderIndex));

})

问题：假设我在幻灯片 5 现在当我点击转到幻灯片 3 然后单击返回而不是返回到第 5 张幻灯片，它将返回幻灯片编号 2

【问题讨论】：

为什么会有回退，回退什么？只需再次单击按钮一个。
@Grumpy 这是一个示例我有多张幻灯片，这会用不同的按钮打开不同的幻灯片吗？我把它简单化了，这样你就可以理解了
应该有上一个和下一个按钮，不是2 3 5，没有意义。

标签： javascript html jquery slick.js

【解决方案1】：

代码中的按钮Go Back 只是返回到当前幻灯片的上一个索引。例如如果当前幻灯片是 n，它将回到 n - 1。如果您希望Go Back 返回您单击的上一张幻灯片，您应该跟踪当前和上一个索引。

请参考以下代码-

var currentSliderIndex = 0;
var previousSliderIndex = 0;

$('.carousel').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
 });
 
$("#slide_3").click(function(){
  $(".carousel").slick('slickGoTo', parseInt(2));
})

$("#slide_4").click(function(){
  $(".carousel").slick('slickGoTo', parseInt(3));
})

$("#slide_5").click(function(){
  $(".carousel").slick('slickGoTo', parseInt(4));
})

$('.carousel').on('afterChange', function (e, s, currentSlideIndex) {
                                previousSliderIndex = currentSliderIndex
                currentSliderIndex = currentSlideIndex;
 
        });


         $("#go-back").click(function () {
                    $(".carousel").slick('slickGoTo', parseInt(previousSliderIndex));
                   
                })

body{
  background:#ccc;
}
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}
h3 {
    background: #fff;
    color: #3498db;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
.action{
  display:block;
  margin:100px auto;
  width:100%;
  text-align:center;
}
.action a {
  display:inline-block;
  padding:5px 10px; 
  background:#f30;
  color:#fff;
  text-decoration:none;
}
.action a:hover{
  background:#000;
}

#go-back{
      background-color: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="main">
  <div class="slider carousel">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
  </div>

  <div class="action">
    <a id="slide_3" href="#" data-slide="3">go to slide 3</a>
    <a id="slide_4" href="#" data-slide="4">go to slide 4</a>
    <a id="slide_5" href="#" data-slide="5">go to slide 5</a>    
    <a id="go-back" href="#" data-slide="5">GO BACK</a>
        
  </div>
</div>

注意 - 这只会跟踪前一张幻灯片，如果您多次单击返回，它只会在 2 张幻灯片之间保持随机播放。

【讨论】：