Click on Carousel Materialize

Question

Hi I am a few days looking for the solution to the following problem: I need to create a clickable Carousel (that has a link). I’m using Materialize, in the latest version, just by clicking on Carousel, it goes to the next item. But in the old version this does not happen.

If you have already been through a situation share the solution, even if it is the old version. And if it is the new version better yet.

PS: Each Carousel item has an independent link.

$('.carousel.carousel-slider').carousel({
          });

.fundo-header {
    background-image: url('../img/imagem-inicio.jpg');
    background-size: cover;
    background-position: center center;
}

.gradiente {
    background: linear-gradient(transparent , black 80%) !important;
}

.espaco-card {
    margin-left: 10px;
    padding-right: 10px;
}

.logo {
    width: 80%;
    margin-top: 20px;
}

.seta {
    width: 12%;
}

.titulo-home {
    margin-top: 0px;
    color: #00333d;
}

.descricao-home {
    font-size: 15px !important;
}

@media only screen and (min-width: 1000px) {
    .sala-cards {
        height: 800px;
    }
}

@media only screen and (max-width: 1000px) {
    .sala-cards {
        height: 800px;
    }
}

@media only screen and (max-width: 900px) {
    .sala-cards {
        height: 700px;
    }
}

@media only screen and (max-width: 700px) {
    .sala-cards {
        height: 600px;
    }
}

@media only screen and (max-width: 490px) {
    .sala-cards {
        height: 500px;
    }
}

@media only screen and (max-width: 440px) {
    .sala-cards {
        height: 400px;
    }
}

@media only screen and (max-width: 412px) {
    .sala-cards {
        height: 460px;
    }
}

.titulo-card {
    text-align: left;
    width: 100%;
}

.textura {
    background-image: url('../img/textura.png');
}

.botao-card {
    margin-right: 0px !important;
}

@media only screen and (max-width: 412px) {
    .titulo-servicos {
        font-size: 22px !important;
        width: 100%;
        text-align: center;
    }
}

.tela-inteira {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* just for jsfiddle */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

.middle-indicator {
    position: absolute;
    top: 40%;
}

.middle-indicator-text {
    font-size: 4.2rem;
}

a.middle-indicator-text {
    color: white !important;
}

.content-indicator {
    width: 64px;
    height: 64px;
    background: none;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.indicators {
    visibility: hidden;
}

.espaco-input {
    margin-bottom: 0px;
}

.em-linha {
    display: inline;
}

.fundo-vermelho {
    background-color: #ed4f2e;
}

.fundo-cinza {
    background-color: #00373f;
}

.linha-1 {
    margin-bottom: 0px;
}

.linha-2 {
    margin-bottom: 0px;
    padding-bottom: 30px;
}

.div-texto {
    padding: 0pc 15px 0px 15px;
    margin: 15px 0px 0px 0px;
}

.espaco-botao {
    margin-top: 15px !important;
}

.espaco-contato {
    margin: 20px 0px 20px 0px;
}

.tela-inteira {
    width: 100% !important;
}

.cartao-interno {
    padding: 0px !important;
}

.cartao-1 {
    padding: 5px 20px;
    background-color: #ed4f2e;
}

.bottom-botao {
    margin-bottom: 15px !important;
}

.tamanho-botao {
    width: 60% !important;
}

.cartao-2 {
    padding: 5px 20px;
    background-color: #00373f;
}

.input-text {
    font-size: 14px !important;
}

.margin-form {
    margin-top: 6px !important;
    margin-left: -4px !important;
}

.margin-radio {
    margin-right: 20px !important;
}

.margin-calendario {
    margin-top: 15px !important;
}

.espaco-botao-2 {
    margin: 15px 0px 15px 0px !important;
}

.margin-contato {
    margin: 0px 10px 0px 10px !important;
}

<!DOCTYPE html>
<html lang="br-pt">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
        <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    </head>
    <body>
        <div class="container-fluid fundo-header">
            <div class="row">
                <div class="col s12 m12 l12 center-align">
                    <img src="img/beoffice-colorido.png" class="logo" />
                </div>
                <div class="col s12 m12 l12 center-align">
                    <a href="#mais" class="scroll">
                        <img src="img/arrow-down-white.gif" class="seta" />
                    </a>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col s12 m12 l12">
                    <h4 class="center-align titulo-home">Seja bem-vindo à <b>BeOffices!</b></h4>
                    <p class="center-align descricao-home">A BeOffices - Escritórios Inteligentes é a melhor solução para quem precisa de um local corporativo e profissional. Localizado no Recreio dos Bandeirantes, oferecemos serviços personalizados e espaços multifuncionais projetados e equipados com tecnologia de ponta para atender às suas necessidades. Toda a infraestrutura ideal para empresas, profissionais liberais, empreendedores, startups e freelancers.</p>
                </div>
            </div>
        </div>
        <div class="carousel carousel-slider center sala-cards" id="mais">
            <div class="carousel-fixed-item center"></div>
            <a href="https://google.com">
                <div class="carousel-item black-text" href="#one!">
                    <div class="row espaco-card">
                        <div class="col s12 m12 l12">
                            <div class="card">
                                <div class="card-image">
                                    <img src="img/sala-reuniao.jpg">
                                    <span class="card-title gradiente titulo-card">Sala de Reunião e Treinamento</span>
                                </div>
                                <div class="card-content">
                                    <p>Salas de reunião e treinamento mobiliadas em alto padrão com infraestrutura completa para o seu evento.</p>
                                </div>
                                <div class="card-action lighten-1 light-green textura">
                                    <a href="#" class="white-text botao-card">Conhecer Sala</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="carousel-item black-text" href="#two!">
                <div class="row espaco-card">
                    <div class="col s12 m12 l12">
                        <div class="card">
                            <div class="card-image">
                                <img src="img/escritorio-virtual-2.jpg">
                                <span class="card-title gradiente titulo-card">Escritório Virtual</span>
                            </div>
                            <div class="card-content">
                                <p>O Escritório Virtual é uma modalidade de serviço personalizado que oferece conveniência, flexibilidade e baixo custo.</p>
                            </div>
                            <div class="card-action lighten-1 orange textura">
                                <a href="#" class="white-text botao-card">Saiba Mais</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item black-text" href="#three!">
                <div class="row espaco-card">
                    <div class="col s12 m12 l12">
                        <div class="card">
                            <div class="card-image">
                                <img src="img/sala-executiva.jpg">
                                <span class="card-title gradiente titulo-card">Sala Executiva</span>
                            </div>
                            <div class="card-content">
                                <p>Salas privativas, mobiliadas em alto padrão e com total infraestrutura para atender às demandas da sua atividade corporativa por um baixo custo fixo.</p>
                            </div>
                            <div class="card-action lighten-1 teal textura">
                                <a href="#" class="white-text botao-card">Conhecer Sala</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item black-text" href="#four!">
                <div class="row espaco-card">
                    <div class="col s12 m12 l12">
                        <div class="card">
                            <div class="card-image">
                                <img src="img/coworking.jpg">
                                <span class="card-title gradiente titulo-card">Coworking</span>
                            </div>
                            <div class="card-content">
                                <p>O Escritório Virtual é uma modalidade de serviço personalizado que oferece conveniência, flexibilidade e baixo custo.</p>
                            </div>
                            <div class="card-action lighten-1 deep-orange textura">
                                <a href="#" class="white-text botao-card">Conhecer Sala</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="js/materialize.js"></script>
        <script>
          $(document).ready(function(){
            $(".scroll").click(function(event){
              event.preventDefault();
              $('html,body').animate({scrollTop:$(this.hash).offset().top}, 800);
            });
           });
        </script>
        <script>
          $('.carousel.carousel-slider').carousel({
          });
        </script>
    </body>

Answer 1

For me it worked, I went to this part of the code materialize.js:

}, {
  key: "_handleCarouselClick",
  value: function _handleCarouselClick(e) {
    // Disable clicks if carousel was dragged.
    if (this.dragged) {
      e.preventDefault();
     1* e.stopPropagation();
      return false;
    } else if (!this.options.fullWidth) {
      3* var clickedIndex = $(e.target).closest('.carousel-item').index();
      var diff = this._wrap(this.center) - clickedIndex;

      // Disable clicks if carousel was shifted by click
      if (diff !== 0) {
        e.preventDefault();
        2* e.stopPropagation();
      }
      this._cycleTo(clickedIndex);
    }
  }

I withdrew 1- e.stopPropagation(); 2 - e.stopPropagation(); 3 - var clickedIndex = $(e.target). Closest('.Carousel-item'). index();

the code went like this

key: "_handleCarouselClick",
      value: function _handleCarouselClick(e) {
        // Disable clicks if carousel was dragged.
        if (this.dragged) {
          e.preventDefault();

          return false;
        } else if (!this.options.fullWidth) {

          var diff = this._wrap(this.center) - clickedIndex;

          // Disable clicks if carousel was shifted by click
          if (diff !== 0) {
            e.preventDefault();

          }
          this._cycleTo(clickedIndex);
        }
      }

I put a href on each Wildcard-item, like this:

<a class="carousel-item card" href="https://materializecss.com/shadow.html">
      <img src="img/amortecedor.png">
      <div class="center" id="descricao">
        <div class="col s12 black-text"><h6 >Amortecedores dianteiros Direito</h6></div>
        <div class="col s12 gray-text"><h6 >Cofap</h6></div>
        <div class="col s12 black-text "><h5 >R$ 2275,00</h5></div>
        <div class="col s12 btn-floating btn-medium   green darken-4 pulse"><i class=" material-icons">add_shopping_cart</i></div>
        <div id="myBox" href="#one!" class="col s12 btn-floating btn-medium  cyan darken-4 modal-trigger"  ><i class=" material-icons">photo_camera</i></div>
      </div>
    </a>

and it worked

Answer 2

Put the

<div class="carousel-fixed-item center"></div>

below the

<div class="carousel-item"></div>

Answer 3

You have to take the

<div class="carousel-fixed-item center"></div>

and the link <a> that falls below it