title: Bootstrap Carousel with different hashtag URL ID
body: <p>I have created a separate URL for each slide of the Bootstrap Carousel. However, it currently uses numbers with a hashtag in the following way:</p>
  
  <pre><code>domain.net/pride#1
  domain.net/pride#2
  domain.net/pride#3
  </code></pre>
  
  <p>Is there a way I can have it change to what I want? Something like:</p>
  
  <pre><code>domain.net/pride#events
  domain.net/pride#press
  domain.net/pride#schedule
  </code></pre>
  
  <p>Thank You.</p>
  
  <pre><code>&lt;script&gt;
      var url = document.location.toString();
      if (url.match('#')) {
      // Clear active item
          jQuery('.carousel-inner div').removeClass('active');
  
      // Activate item number #hash
      var index = url.split('#')[1];
          jQuery('.carousel-inner div:nth-child(' + index + ')').addClass('active');
      }
  
      jQuery('#PrideCr').bind('slid', function (e) {
          // Update location based on slide (index is 0-based)
          var item = jQuery('#PrideCr .carousel-inner .item.active');
              window.location.hash = "#"+parseInt(item.index()+1);
      })
  &lt;/script&gt;
  </code></pre>