1

Oi Estou a alguns dias procurando a solução para o seguinte problema: Preciso criar um carousel que seja clicável (que tenha um link). Estou utilizando o Materialize, na ultima versão, apenas ao clicar no carousel, ele vai pro próximo item. Mas na versão antiga isso não acontece.

Se já tiverem passado por uma situação compartilhe a solução, mesmo que seja da versão antiga. E se for na versão nova melhor ainda.

PS: Cada item do carousel tem um link independente.

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

3 Respostas 3

1

Pra mim deu certo, fui nessa parte do código 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);
    }
  }

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

o codigo ficou assim

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);
        }
      }

Coloquei um href em cada carousel-item card, assim:

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

e funcionou

1

Colocar a

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

abaixo da

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

Tem que tirar o

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

e o link <a> que fica abaixo dele

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .