回到使用slick和jquery的prevoius幻灯片
回到使用slick和jquery的prevoius幻灯片
提问于 2021-07-07 11:21:46
我有幻灯片，其中包含对操作的多次调用，这些操作在单击时打开不同的幻灯片。
例如，如果用户在幻灯片 1中，并单击打开幻灯片号5的按钮，则在单击go back按钮时，应返回幻灯片 1。
这里是：现场演示
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>Js
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，当我单击go to幻灯片3，然后单击go，而不是返回到幻灯片号5时，它将转到幻灯片号2。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-07 11:48:09
代码中的按钮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>
注-这将只跟踪一个单一的前幻灯片，如果您多次单击上一次，它将只是保持两个幻灯片之间的洗牌。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68285061
复制相关文章
相似问题
腾讯云开发者
