Bootstrap Carousel to have different URL for each slide

Question

My bootstrap carousel is located here: testdomain.org/about.html and when the slide changes, the URL in the address bar remains the same. I want the URL to auto change when the slides change to something like this:

https://testdomain.org/about.html#slide1
https://testdomain.org/about.html#slide2
https://testdomain.org/about.html#slide3

How can we make this happen?I created this JSFiddle Demo for your convenience. I don't know how to go about writing JS for this :(

It's the standard bootstrap HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

DEMO Screenshot of the URL in the Address bar should look like this

You need to give an ID to each slide, and check `location.hash` on load and the `hashchange` event. — gcampbell, Jul 09 '16 at 14:08
This has already been asked here: http://stackoverflow.com/questions/18339638/how-do-i-add-a-links-to-pictures-in-twitter-bootstrap-carousel. Wrap each image in a link. — Nathaniel Flick, Jul 09 '16 at 14:31
@NathanielFlick: That's not what I want. I want the URL in the Address Bar of the browser to change when the slide changes. Not add a link to the slides. — Elaine Byene, Jul 09 '16 at 17:00
So you want to be able to provide the #link and it goes to the page with the slide showing? — Nathaniel Flick, Jul 11 '16 at 07:49

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

Use the carousel Events to determine when a slide transition happens and which slide has been activated. Then update the address bar and browser history with the slide URL. Instructions for both are at the links below:

http://getbootstrap.com/javascript/#carousel-events

Updating address bar with new URL without hash or reloading the page

edited May 23 '17 at 11:45

Community

1
1

answered Jul 10 '16 at 02:34

raduation

792
5
11

I'm more of a html/css person. I'm no good at javascript and can't understand those tutorials. :( – Elaine Byene Jul 10 '16 at 02:36
Give it a try, you can do it! – raduation Jul 10 '16 at 02:38
I could possibly try if there's some working example. Anyways. thanks. Waiting for someone to help out. – Elaine Byene Jul 10 '16 at 06:40

score 0 · Answer 2 · answered Jan 11 '17 at 21:01

Try adding the following javascript, amending references where applicable. You will also need to add an ID to <div class="carousel-inner" role="listbox">. I worked the below off the following - <div class="carousel-inner" id="listbox" role="listbox">.

childsList = Array.prototype.slice.call( document.getElementById('listbox').children );

$("#myCarousel").on('slide.bs.carousel', function (event) {
  window.location.hash = "slide" + (childsList.indexOf(event.relatedTarget) + 1);
}

This picks up the event of a slide changing, picks up the index of the slide and sets the '#' in the URL to '#slide[index of slide + 1]'. I hope this helps.

Here is a fiddle doing the same thing but outputting to a rather than the URL. https://jsfiddle.net/JokerDan/22botkvm/

Bootstrap Carousel to have different URL for each slide

2 Answers2