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>