0

Assume that there are five items in the carousel and I like to add a html bookmark to the 2nd item of bootstrap carousel. I know how a bookmark works in different pages but I don't know how to capture carousel item through URL.

Syed
  • 15,657
  • 13
  • 120
  • 154

2 Answers2

0

It is in de Docs

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

Create a javascript function:

function goToSlide(number) {
   $("#carousel").carousel(number);
}

And then, just add an onClick event on your link.

<a href="#" onClick="javascript:goToSlide(2);">Go to slide #2</a>
ɐsɹǝʌ ǝɔıʌ
  • 4,440
  • 3
  • 35
  • 56
  • You mean create a bookmark to your favorites stored in a web browser? – ɐsɹǝʌ ǝɔıʌ Apr 29 '15 at 09:35
  • 1
    Use the URL hash. For instance, add #3 to your URL. When you bookmark this, the #3 will be saved along with the URL. Then, in your code, read the hash (`window.location.hash`) at load time and go to the corresponding slide using equisde's function. – Jeremy Thille Apr 29 '15 at 09:51
  • 1
    @JeremyThille gave a good advice. You have an example [**here**](http://stackoverflow.com/questions/20249841/bootstrap-carousel-link-to-specific-slide) on how to read the hash. – ɐsɹǝʌ ǝɔıʌ Apr 29 '15 at 09:59
  • @equisde your solution has it's own advantage but doesn't serve my purpose. Thanks for helping :) I have posted answer to my question, you can have a look. – Syed Apr 29 '15 at 17:11
0

For eg. if your URL reads http://example.com#2 then with the help of below given JS I will be landed to 3rd slide of the carousel.

$(document).ready(function(){
  var slideNumber = parseInt(window.location.hash.substring(1));
  $('#carousel-slide').carousel(slideNumber);
});
Syed
  • 15,657
  • 13
  • 120
  • 154