Button appear only after you see all carousel slides

Question

I am developing an interaction that the person can only advance when he sees all the slides of a carousel, but my code only works when the person clicks on 1 indicator of the carousel and not at all. I’m using the Bootstrap carousel. I’m going to put my code.

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

<script>
 $('[data-target="#carouselExampleIndicators"]').on('click',function(){
    $('.btn').css('display','block');
    $('[data-target="#carouselExampleIndicators"]').off('click');
});
</script>

Answer 1

I imagine you’re looking for something like this:

<script>
$(function() {
      $('[data-target="#carouselExampleIndicators"]').on('click',function(e) {
       var total_slide = $('[data-target="#carouselExampleIndicators"]').length;

       if (total_slide == ($(this).index() + 1)) {
          $('.btn').css('display','block');
       } else {
          e.preventDefault();
          $(this).off('click');
       }
   });
});
</script>

Answer 2

Add a specific class to the already viewed slide (for example, .visto) and not to be confused with another class used on the page. The class .visto will only be used in the indicators. When you call the event click you add this class in the indicator and compare if the number of classes .visto is equal to the number of elements with the attribute [data-target="#carouselExampleIndicators"]. If it’s the same, you show the button.

But first you need to add this class to the active slide initially when loading the page:

$(function(){ // aguarda o carregamento do DOM
   $('[data-target="#carouselExampleIndicators"].active').addClass('visto'); // adiciona a classe no indicador ativo
   var slides = $('[data-target="#carouselExampleIndicators"]').length; // conta o número de slides
   
   $('[data-target="#carouselExampleIndicators"]').on('click',function(){
      $(this).addClass('visto'); // adiciona a classe .visto no indicador clicado
      if(slides == $('.visto').length){ // faz a comparação
         $('.btn').show(); // mostra o botão
         $('[data-target="#carouselExampleIndicators"]').off('click'); // remove a escuta do evento
      }
   });
});

#carouselExampleIndicators{
  width: 300px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.btn{
   display: none;
}
</style>
<button class="btn">Continuar</button>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Third slide">
    </div>
  </div>
</div>

Observing: this will only work if the person clicks on the indicators, as explicitly stated in the question. But remember that Carousel can be running automatically or may have arrows to "left/right" navigation. If the intention is to show the button also in such cases, it would have to reformulate the code.