Hi I'm a few days away looking for the solution to the following problem: I need to create a carousel that is clickable (which has a link). I'm using Materialize, in the latest version, just by clicking the carousel, it goes to the next item. But in the old version this does not happen.
If you have already experienced a situation, share the solution, even if it is from the old version. And if it's in the new version even better.
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><divclass="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><scriptsrc="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>