anchor link jump to carousel slide

Question

I have different anchor links in my navigation. Currently if you click the submenu i.e. "Beglaubigungen" your jumping to an normal anchor, which is the bootstrap slider. But I want it additionally to slide within the slider to the relating slide. How can I do this?

The slider HTML:

<ul class="list-inline">
    <li> <a id="carousel-selector-0" class="selected"> Example 1 </a></li>
    <li> <a id="carousel-selector-1" > Example 2 </a></li>
    <li> <a id="carousel-selector-2" > Example 3 </a></li>              
</ul>

<div id="myCarousel" class="carousel slide">
   <!-- main slider carousel items -->
   <div class="carousel-inner">
       <div class="active item" data-slide-number="0"> abcdefghi</div>
       <div class="item" data-slide-number="1"> abcdefghi</div>
       <div class="item" data-slide-number="2"> abcdefghi</div>
   </div>
</div>

My navbar:

WHAT I HAVE TRIED

I guess the anchor link must look sth like this for the navigation:

https://mydomain.de/#anchor?slide=2

I tried this, but its not working:

$(document).ready(function(){

$('#myCarousel').carousel(window.location.hash.substring(1));

});

Answer 1

You can achieve the needed functionality by transitioning the carousel when the hashchange event occurs (with a predefined format/syntax for the carousel anchor links).

MVP example implementation (have kept the explanation inline for clarity)

Have also added in a check to allow default behaviour for other anchor links in the page. Click on 'Normal Hash' to see that. Based on your needs, you may or may not need to handle this.

// Create a RegExp for matching expected hash values. 
// This is used to ensure our sliding logic happens on only the relevant hash-changes
// For this example, I have assumed the pattern to be myCarousel-<slide#> 
// (Ex: myCarousel-1 goes to the first slide)
var slideRegExp = /^#myCarousel-[0-9]+$/;

// Get a reference to the nav items to update active status  - you may want to do this differently 
// based on your usecase
var $navItems = $('.nav-item');

// Initialise the carousel and keep the reference (to avoid repeated jQuery lookups)
var $c = $('#myCarousel').carousel({
  interval: 9000
});

// Listen for the hash change event on the window object
$(window).on('hashchange', function(ev) {
  // Hash has changed
  //Get current has value
  var hash = window.location.hash;

  // Ensure this is a hash for our slider
  if (!slideRegExp.test(hash)) {
    // RegExp match failed, this is for something else, do nothing
    // and preserve default behaviour
    return true;
  }

  // Exctract the slide value 
  var slide = +hash.split('-')[1];
  // Adjust for zero index
  slide = !isNaN(slide) && slide > 0 ? slide - 1 : 0;

  // Transition to the computed slide
  $c.carousel(slide);

  // Update hash to the hash-id of the carousel
  // You may want to do this using scrollTo or something similar if changing the hash is a problem
  window.location.hash = '#myCarousel';

  // Prevent the default browser action for this hash change
  ev.preventDefault();
  return false;
});

// Listen for the slide event and update the active status of navigation links
// Not sure if this is necessary in your case considering your example uses a dropdown 
$c.on('slide.bs.carousel', function(ev) {
  var slide = +ev.to;
  $navItems.filter('.active').removeClass('active');
  $navItems.filter("[data-slide='" + slide + "']").addClass('active');
});

.nav-item {
    cursor: pointer;
}

.nav-item.active {
    color: blue;
}

nav {
    background: #dadada;
    margin-bottom: 1rem;
}

#normal-hash{
    height: 400px;
    background: #ffdada;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<main>
  <nav class="navbar">
    <div class="nav-item"><a href="#normal-hash">Normal Hash</a></div>
    <div class="nav-item active"><a href="#myCarousel-1">Slide 1</a></div>
    <div class="nav-item"><a href="#myCarousel-2">Slide 2</a></div>
    <div class="nav-item"><a href="#myCarousel-3">Slide 3</a></div>
  </nav>
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="http://via.placeholder.com/350x150/FF0000" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://via.placeholder.com/350x150/00FF00" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="http://via.placeholder.com/350x150/0000FF" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <div style="height:500px;background:#dadada">
    <h4>Padding Div</h4>
  </div>
  <div id="normal-hash">
    <h4>Normal Hash Behaviour Div</h4>
  </div>
  <div style="height:500px;background:#dadada">
    <h4>Padding Div</h4>
  </div>
</main>

References:

• SO Question

• MDN HashChange Page

• Caniuse

Answer 2

Found a SOLUTION. Just firing another id's functions:

<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" id="secondaryButton" onclick="document.getElementById('primaryButton').click()" />