Click on Carousel Materialize

Question

Click on Carousel Materialize

Oi I am a few days away looking for the solution to the following problem: I need to create a carousel that is clickable (that has a link). I'm using Materialize, in the latest version, just by clicking on the carousel, it will pro 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 from the old version. And if it is in the new version even better.

PS: each carousel item has a link independent.

$('.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.br">
                <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>

1

html carousel materialize

Author: Gabriel Marinho, 2018-03-26

Source

3 answers

score 1 · Answer 1

For me it worked, I went in that part of the materialize code.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);
    }
  }

Withdrawal 1-E. stopPropagation(); 2-E. stopPropagation(); 3-var clickedIndex = $(E. target).closest ('.carousel-item').index();

The code is 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 an href in each carousel-item card, 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

score 1 · Answer 2

Place a

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

Below

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

1

Author: Thiago Icassatti Santos, 2021-01-17 01:40:20

score 0 · Answer 3

Have to take out the

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

And the link <a> below it

0

Author: Gabriel Marinho, 2018-03-26 13:58:57