- 首页
- 前端开发
- 使用 slick 和 jquery 返回到之前的幻灯片
使用 slick 和 jquery 返回到之前的幻灯片
[英] Go back to the prevoius slide using slick and jquery
本文介绍了使用 slick 和 jquery 返回到之前的幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的幻灯片包含多个操作调用，这些操作调用可在单击时打开不同的幻灯片
例如，如果用户在幻灯片 编号 1 中并单击打开幻灯片编号 5 的按钮，则在单击按钮返回 时，它应该返回到幻灯片 1号
这里是:现场演示
HTML
<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 class="action"><a id="slide_3";href="#";data-slide=3">转到幻灯片3<a id="slide_4";href="#";data-slide=4">转到第4张幻灯片<a id="slide_5";href="#";data-slide＝5">转到幻灯片5<a id="go-back";href="#";data-slide=5">GO BACK</a>
Js
var sliderIndex = 0;$('.carousel').slick({幻灯片显示:1，幻灯片滚动:1，箭头:假，褪色:真实，});$("#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) {滑块索引 = currentSlideIndex-1;});$(#go-back").click(function() {$(.carousel").slick('slickGoTo', parseInt(sliderIndex));})
<块引用>
问题:假设我在幻灯片 5 现在当我点击转到幻灯片 3然后单击返回而不是返回到第 5 张幻灯片，它将返回幻灯片编号 2
解决方案
代码中的按钮 Go Back 只是返回到当前幻灯片的上一个索引.例如如果当前幻灯片是 n，它将返回到 n - 1.如果您希望 Go Back 返回到您单击的上一张幻灯片，您应该跟踪当前和上一个索引.
请参考以下代码-
var currentSliderIndex = 0;var 前一个滑块索引 = 0;$('.carousel').slick({幻灯片显示:1，幻灯片滚动:1，箭头:假，褪色:真实，});$("#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 = currentSliderIndexcurrentSliderIndex = currentSlideIndex;});$("#go-back").click(function () {$(".carousel").slick('slickGoTo', parseInt(previousSliderIndex));})
body{背景:#ccc;}.主要的 {字体系列:Arial;宽度:500px；显示:块；保证金:0 自动；}h3{背景:#fff;颜色:#3498db；字体大小:36px；行高:100px；边距:10px；填充:2%；位置:相对；文本对齐:居中；}.行动{显示:块；边距:100px 自动；宽度:100%；文字对齐:居中；}.action a {显示:内联块；填充:5px 10px;背景:#f30;颜色:#fff;文字装饰:无；}.action a:悬停{背景:#000；}#回去{背景颜色:绿色；}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="样式表"/><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 class="action"><a id="slide_3" href="#" data-slide="3">转到幻灯片 3</a><a id="slide_4" href="#" data-slide="4">转到幻灯片 4</a><a id="slide_5" href="#" data-slide="5">转到幻灯片 5</a><a id="go-back" href="#" data-slide="5">返回</a>
<块引用>
注意 - 这只会跟踪前一张幻灯片，如果您多次单击返回，它只会在 2 张幻灯片之间移动.
I have slides that contain multiple calls to actions which open different slide on click
eg if a user is in slide number 1 and clicks a button which opens slide number 5, on clicking button go back it should go back to slide number 1
Here is : 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>
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));
})
Problem: assume I am in slide number 5 Now when I click go to slide 3
and click go back instead of going back to slide number 5 it will go
to slide number 2
解决方案
The button Go Back in your code just goes back to previous index of current slide. e.g. if current slide is n, it will just go back to n - 1.
If you want Go Back to go back to previous slide that you clicked, you should keep track of current as well as previous index.
Please refer below code -
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>
Note - This will only keep track of a single previous slide, if you click back multiple times, it will just keep shuffling between 2 slides.
这篇关于使用 slick 和 jquery 返回到之前的幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
