Return to page with the same active item (bootstrap carousel)

Question

I have a page that uses boostrap carousel. Every slide displays 4 divs. From every div we can go to page with specifications about the product. This page has a button that uses:

  $('.goback__button').click(function(){
     window.history.back();
     return false;
   })

to return to previous page with slider. Problem is that i want to go back to the same slide (active slide, active item) when i click on this button. Now it's redirects to page with the first slide active.

Answer 1

If you want to do it in server side you can pass a Get parameter in the request and then in the HTML select the item

If you want to do it directly in JavaScript, you have to use a hash or a get parameter (and parse the params), the easy way is using the hash for example:

localhost/web.html#slide1

You would have to write the code that will control the hash value and then modify the active item

Answer 2

You could add a cookie to the user's browser when they click the back button that stores the number of the slide in the carousel, like:

$('.goback__button').click(function(){
  document.cookie = "slide-number=2";
  window.history.back();
  return false;
});

Then, on the first page, in your $(document).ready() function, locate the cookie, get the value and then use bootstrap's .carousel(number) method to go to the appropriate slide. Then delete the cookie:

$(document).ready(function(){
  var num = getCookie("slide-number");
  if (num != ""){
    num = parseInt(num);
    $('#myCarousel').carousel(num);
    document.cookie = "slide-number=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
});

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
        c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
    }
  }
  return "";
}

Disclaimer: Got the getCookie function from W3Schools.