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
Advertisement
Answer
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.