Affichage de contenu avec navigation horizontale (JavaScript)

Question

J'ai une barre de navigation horizontale qui utilise la bibliothèque CSS Flickity. J'ai modifié le gabarit du carrousel de façon à ce qu'une cellule de carrousel soit sélectionnée au centre de la barre de navigation. J'ai 5 cellules dans le carrousel nommé «diapositive 1», «diapositive 2», et ainsi de suite. J'essaie de comprendre comment afficher le contenu correspondant uniquement lorsque la cellule carrousel est sélectionnée. J'ai besoin que le contenu soit caché autrement.

<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> 

Voici mon Codepen: https://codepen.io/loudenw/pen/jGaxzG

Answer 1

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

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

Je comptais sur l'événement select dans l'espace de noms flickity et élément montrant qui a id = slide + currentSelectedSlide + 1 (en tant que script reçoit le numéro de diapositive à partir de 0, mais votre ids commence à partir de 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>

selon la documentation $flickity.data('flickity').selectedIndex doit être utilisé à la place jquery méthode index() - mais pour moi cela ne fonctionne pas