Displaying Content With Horizontal Navigation (JavaScript)

Question

I have a horizontal scrolling navigation bar using the CSS library Flickity. I modified the carousel template so that when a carousel cell is selected, it snaps to the center of the navigation bar. I have 5 cells in the carousel named 'slide 1', 'slide 2', and so on. I'm trying to figure out how to display the corresponding content only when it's carousel cell is selected. I need the content to be hidden otherwise.

 <nav>
 <div class="carousel" data-flickity>

            <div class="carousel-cell">
                <a href="#slide1">
                slide 1
                </a>
            </div>

            <div class="carousel-cell">
                <a href="#slide2">
                slide 2
                </a>
            </div>

            <div class="carousel-cell">
                <a href="#slide3">
                slide 3
                </a>
            </div>        

            <div class="carousel-cell">
                <a href="#slide4">
                slide 4
                </a>
                </div>

            <div class="carousel-cell">
                <a href="#slide5">
                slide 5
                </a>
            </div>    

 </div>
 </nav>    
 <!--Content-->
 <main>
 <div class="container">
          <div id="slide1">
            SLIDE 1
          </div>
          <div id="slide2">
           SLIDE 2
          </div>
          <div id="slide3">
           SLIDE 3
          </div>
          <div id="slide4">
           SLIDE 4
          </div>
          <div id="slide5">
           SLIDE 5
          </div>           
 </div>
 </main>

Here is my Codepen: https://codepen.io/loudenw/pen/jGaxzG

Answer 1

Flickity events documentation https://flickity.metafizzy.co/events.html#select

jQuery event.namespace https://api.jquery.com/event.namespace/

I relied on select event in flickity namespace and showing element which has id=slide + currentSelectedSlide + 1 (as script gets slide number starting from 0, but your ids starts from 1)

$(document).ready(function() {

  $('.carousel').on('select.flickity', function() {
    var selector = '#slide' + ($('.carousel-cell.is-selected').index()+ 1);
    $('.container').find('div').hide();
    $(selector).fadeIn();
  })

});

main .container {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  background-color: red;
  text-align: center;
}

nav {
  width: 100%;
  height: 30px;
  background-color: #ffffff;
  text-align: center;
}

.hidden {
  display: none;
}

.carousel {
  background-color: #fff;
  width: 60%;
  margin: 0 20% 0 20%;
}

.carousel-cell {
  width: 50%;
  height: 30px;
  margin-right: 10px;
  background: #fff;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

* {
  box-sizing: border-box;
}

.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  background: transparent;
}

.flickity-prev-next-button:hover {
  background: transparent;
}


/* arrow color */

.flickity-prev-next-button .arrow {
  fill: #000;
}

.flickity-prev-next-button.no-svg {
  color: #000;
}

.carousel-cell {
  opacity: 0;
  transition: opacity .4s;
}

.carousel-cell.is-selected {
  opacity: 1;
}

.container>div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />



<nav>
  <div class="carousel" data-flickity='{"initialIndex": 4, "pageDots": false } '>

    <div class="carousel-cell">
      <a href="#slide1">
                    slide 1
                    </a>
    </div>

    <div class="carousel-cell">
      <a href="#slide2">
                    slide 2
                    </a>
    </div>

    <div class="carousel-cell">
      <a href="#slide3">
                    slide 3
                    </a>
    </div>

    <div class="carousel-cell">
      <a href="#slide4">
                    slide 4
                    </a>
    </div>

    <div class="carousel-cell">
      <a href="#slide5">
                    slide 5
                    </a>
    </div>

  </div>
</nav>
<!--Content-->
<main>
  <div class="container">
    <div id="slide1" class="slide-related-content">
      SLIDE 1 RELATED CONTENT
    </div>
    <div id="slide2" class="slide-related-content">
      SLIDE 2 RELATED CONTENT
    </div>
    <div id="slide3" class="slide-related-content">
      SLIDE 3 RELATED CONTENT
    </div>
    <div id="slide4" class="slide-related-content">
      SLIDE 4 RELATED CONTENT
    </div>
    <div id="slide5" class="slide-related-content">
      SLIDE 5 RELATED CONTENT
    </div>
  </div>
</main>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.js"></script>

as per documentation $flickity.data('flickity').selectedIndex should be used instead jquery index() method - but for me it doesn't work