Utilize o componente Carrossel na homepage para destacar e rotacionar conteúdos importantes ou promocionais, como produtos em destaque, ofertas especiais ou notícias principais. Este componente é ideal para captar a atenção dos utilizadores e fornecer acesso rápido a informações ou ofertas relevantes.
No carrossel horizontal é possível ocultar a mensagem a baixo dos links bem como as setas de navegação lateral. O primeiro card do carrossel corresponde à imagem que está a ser visualizada. Sempre seja efetuado um comportamento de mouse hover, o mesmo deve assumir a cor 500 da cor utilizada.
Exibe conteúdos de forma atraente e dinâmica, chamando a atenção dos utilizadores para itens importantes.
Oferece controles de navegação, permitindo que os utilizadores avancem ou retrocedam manualmente através dos itens.
Incorpore o componente Carrossel homepage sempre que desejar destacar múltiplos conteúdos importantes de forma organizada e atraente, melhorando a interação e o engajamento dos utilizadores com a interface.
<div class="gra-carousel-homepage" data-nav="true">
<div class="owl-carousel onlyImg">
<div class="item">
<img src="/img/exemplos/coroa-da-mata-pm.jpg" alt="Image 1">
</div>
<div class="item">
<img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 2">
</div>
<div class="item">
<img src="/img/exemplos/faialPico.jpg" alt="Image 3">
</div>
<!-- Add more images as needed -->
</div>
<div class="custom-nav">
<div class="nav-card gra-background-blue-900" data-slide="0">
<span>23.02.2024</span>
<p class="gra-font-bold">Açores são destino nacional convidado da BTL, que decorre entre 28 de fevereiro e 3 de março</p>
<a href="#" class="gra-link">Saber mais<i class="icon-circle-add iconRight"></i></a>
</div>
<div class="nav-card gra-background-blue-800" data-slide="1">
<span>23.02.2024</span>
<p class="gra-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="gra-link">Saber mais<i class="icon-circle-add iconRight"></i></a>
</div>
<div class="nav-card gra-background-blue-700" data-slide="2">
<span>23.02.2024</span>
<p class="gra-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="gra-link">Saber mais<i class="icon-circle-add iconRight"></i></a>
</div>
<!-- Add more cards as needed -->
</div>
<div class="carousel-message">
<div class="contentText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Lorem ipsum dolor sit
<div class="gra-carousel-homepage" data-nav="true">
<div class="owl-carousel">
<div class="item">
<div class="text-content">
<span class="gra-font-2xl gra-font-bold">dd.mm.aaaa</span>
<h1 class="gra-font-4xl gra-font-bold title">Lorem ipsum 1</h1>
<p class="gra-font-xl description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<a href="#" class="gra-link">Lorem ipsum dolor sit<i class="icon-chevron-right iconRight"></i></a>
</div>
<img src="/img/exemplos/coroa-da-mata-pm.jpg" alt="Image 1">
</div>
<div class="item">
<div class="text-content">
<span class="gra-font-2xl gra-font-bold">dd.mm.aaaa</span>
<h1 class="gra-font-4xl gra-font-bold title">Lorem ipsum 2</h1>
<p class="gra-font-xl description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<a href="#" class="gra-link">Lorem ipsum dolor sit<i class="icon-chevron-right iconRight"></i></a>
</div>
<img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 2">
</div>
<div class="item">
<div class="text-content">
<span class="gra-font-2xl gra-font-bold">dd.mm.aaaa</span>
<h1 class="gra-font-4xl gra-font-bold title">Lorem ipsum 3</h1>
<p class="gra-font-xl description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<a href="#" class="gra-link">Lorem ipsum dolor sit<i class="icon-chevron-right iconRight"></i></a>
</div>
<img src="/img/exemplos/faialPico.jpg" alt="Image 3">
</div>
<!-- Add more images as needed -->
</div>
<div class="custom-nav">
<div class="nav-card gra-background-blue-900" data-slide="0">
<span class="gra-font-light">23.02.2024</span>
<p class="gra-font-bold">Açores são destino nacional convidado da BTL, que decorre entre 28 de fevereiro e 3 de março</p>
<a href="#" class="gra-link">Saber mais<i class="icon-circle-add iconRight"></i></a>
</div>
<div class="nav-card gra-background-blue-800" data-slide="1">
<span class="gra-font-light">23.02.2024</span>
<p class="gra-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="gra-link">Saber mais<i class="icon-circle-add iconRight"></i></a>
</div>
<div class="nav-card gra-background-blue-700" data-slide="2">
<span class="gra-font-light">23.02.2024</span>
<p class="gra-font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="gra-link">Saber mais<i class="icon-circle-add iconRight"></i></a>
</div>
<!-- Add more cards as needed -->
</div>
<div class="carousel-message">
<div class="contentText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
<div class="gra-carousel-homepage gra-pos-relative" data-nav="true">
<div class="owl-carousel with-filter">
<div class="item">
<img src="/img/exemplos/coroa-da-mata-pm.jpg" alt="Image 1">
<div class="content">
<span class="dateSlide">dd.mm.aaaa</span>
<h1 class="title">Lorem ipsum 1</h1>
</div>
</div>
<div class="item">
<img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 2">
<div class="content">
<span class="dateSlide">dd.mm.aaaa</span>
<h1 class="title">Lorem ipsum 2</h1>
</div>
</div>
<div class="item">
<img src="/img/exemplos/faialPico.jpg" alt="Image 3">
<div class="content">
<span class="dateSlide">dd.mm.aaaa</span>
<h1 class="title">Lorem ipsum 3</h1>
</div>
</div>
<!-- Add more images as needed -->
</div>
<div class="contentFilter">
<div class="gra-filter">
<div class="gra-filter-content">
<div class="gra-filter-input">
<input type="text" class="gra-input-filter" placeholder="Pesquise aqui">
<div id="suggestionsContainer" class="suggestions"></div>
<a href="#" class="gra-link openFilter">
<span class="desktop">Filtrar<span class="countFilters"></span></span>
<span class="mobile"><i class="icon-filter filterIconMobile"></i>
<span class="countFiltersMobile gra-badge error"></span></span>
</a>
<a href="#" class="gra-link closeFilter">
<span class="desktop">Fechar<span class="countFilters"></span></span>
<span class="mobile"><i class="icon-times closeIconMobile"></i><span class="countFiltersMobile gra-badge error"></span></span>
</a>
<button class="gra-btn btn-primary searchBtn desktop btn-primary-deactivated" disabled>Pesquisar</button>
<button class="icon icon-primary searchBtn mobile icon-primary-deactivated" disabled><i class="icon-search closeIcon"></i></button>
</div>
</div>
<div class="gra-filter-box">
<form action="#" class="gra-form-filter">
<div class="gra-row-bs">
<div class="gra-col-bs-xl-3">
<label for="default">Título do campo</label>
<input class="form form-control" type="text" placeholder="Introduza aqui o texto">
</div>
<div class="gra-col-bs-xl-3">
<label for="select1">Título do campo</label>
<select class="gra-select gra-simple-select form-select" id="select1">
<option value="" selected>Selecione</option>
<option value="lorem1">Lorem ipsum 1</option>
<option value="lorem2">Lorem ipsum 2</option>
<option value="lorem3">Lorem ipsum 3</option>
<option value="lorem4">Lorem ipsum 4</option>
</select>
</div>
<div class="gra-col-bs-xl-3">
<label for="select2">Título do campo</label>
<select class="gra-select gra-simple-select form-select" id="select2">
<option value="" selected>Selecione</option>
<option value="lorem1">Lorem ipsum 1</option>
<option value="lorem2">Lorem ipsum 2</option>
<option value="lorem3">Lorem ipsum 3</option>
<option value="lorem4">Lorem ipsum 4</option>
</select>
</div>
</div>
<div class="gra-row-bs">
<div class="gra-col-bs-xl-3">
<label for="default">Título do campo</label>
<div class="gra-daterangepicker-container">
<input class="form form-control daterangepickerInput simpleDatePicker" placeholder="dd/mm/aaaa" type="text">
</div>
</div>
<div class="gra-col-bs-xl-3">
<label for="select3">Título do campo</label>
<select class="gra-select gra-simple-select form-select" id="select3">
<option value="" selected>Selecione</option>
<option value="lorem1">Lorem ipsum 1</option>
<option value="lorem2">Lorem ipsum 2</option>
<option value="lorem3">Lorem ipsum 3</option>
<option value="lorem4">Lorem ipsum 4</option>
</select>
</div>
<div class="gra-col-bs-xl-3">
<label for="select4">Título do campo</label>
<select class="gra-select gra-simple-select form-select" id="select4">
<option value="" selected>Selecione</option>
<option value="lorem1">Lorem ipsum 1</option>
<option value="lorem2">Lorem ipsum 2</option>
<option value="lorem3">Lorem ipsum 3</option>
<option value="lorem4">Lorem ipsum 4</option>
</select>
</div>
</div>
</form>
<div class="gra-hr-horizontal-dark-s"></div>
<div class="actions">
<a href="#" class="gra-link clearFilter">Limpar filtros</a>
<button class="gra-btn btn-primary submitFilter">Aplicar</button>
</div>
</div>
</div>
</div>
<div class="carousel-message">
<div class="contentText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>