Carrosel homepage

Um carrossel de imagens é um componente utilizado recorrentemente em sites/aplicações cujo o propósito é mostrar conteúdo mídia, oferecendo um aspecto mais dinâmico e apelativo.

Características Principais

Apresentação Visual

Oferece uma forma atraente de exibir várias imagens sem sobrecarregar a interface.

Navegação Interativa

Permite aos utilizadores avançar ou retroceder através das imagens manualmente.

Controle de Exibição

Inclui controles de navegação, como setas ou indicadores, para melhorar a usabilidade e a experiência do utilizador.

Exemplo de Utilização

Galerias de fotos em sites de fotografia.
Apresentações de eventos ou resumos visuais e sites de notícias.

Incorpore o componente Carrossel de Imagens sempre que precisar mostrar uma série de imagens de forma sequencial e organizada, melhorando a experiência visual e a interação dos utilizadores com o conteúdo.

Carrosel de imagens tamanho L

                                            
<div class="gra-carousel-container carousel-l">
    <div class="active-image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
    </div>
    <div class="carousel-navigation">
        <div class="nav-left">
            <button id="prev-button" type="button" class="icon icon-secondary owl-nav left-nav">
                <i class="icon-chevron-left iconLeft"></i>
            </button>
        </div>
        <!-- Carousel -->
        <div id="image-carousel" class="owl-carousel">
            <div class="item">
                <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
            </div>
            <div class="item">
                <img src="/img/exemplos/Nascer-do-Sol-PDL.jpg" alt="Image 2">
            </div>
            <div class="item">
                <img src="/img/exemplos/coroa-da-mata-pm.jpg" alt="Image 3">
            </div>
            <div class="item">
                <img src="/img/exemplos/SaoMiguel.jpg" alt="Image 4">
            </div>
            <div class="item">
                <img src="/img/exemplos/sun-cesar.jpg" alt="Image 5">
            </div>
            <div class="item">
                <img src="/img/exemplos/pico-pordosol.jpg" alt="Image 6">
            </div>
            <div class="item">
                <img src="/img/exemplos/Torre de Belem.jpg" alt="Image 7">
            </div>
            <div class="item">
                <img src="/img/exemplos/faialPico.jpg" alt="Image 8">
            </div>
            <div class="item">
                <img src="/img/exemplos/Sunset.jpeg" alt="Image 9">
            </div>
            <!-- Add more items as needed -->
        </div>

        <div class="nav-right">
            <button id="next-button" type="button" class="icon icon-secondary owl-nav right-nav">
                <i class="icon-chevron-right iconRight"></i>
            </button>
        </div>
    </div>
</div>

Carrosel de imagens tamanho M

                                            
<div class="gra-carousel-container carousel-m">
    <div class="active-image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
    </div>
    <div class="carousel-navigation">
        <div class="nav-left">
            <button id="prev-button" type="button" class="icon icon-secondary owl-nav left-nav">
                <i class="icon-chevron-left iconLeft"></i>
            </button>
        </div>
        <!-- Carousel -->
        <div id="image-carousel" class="owl-carousel">
            <div class="item">
                <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
            </div>
            <div class="item">
                <img src="/img/exemplos/Nascer-do-Sol-PDL.jpg" alt="Image 2">
            </div>
            <div class="item">
                <img src="/img/exemplos/coroa-da-mata-pm.jpg" alt="Image 3">
            </div>
            <div class="item">
                <img src="/img/exemplos/SaoMiguel.jpg" alt="Image 4">
            </div>
            <div class="item">
                <img src="/img/exemplos/sun-cesar.jpg" alt="Image 5">
            </div>
            <div class="item">
                <img src="/img/exemplos/pico-pordosol.jpg" alt="Image 6">
            </div>
            <div class="item">
                <img src="/img/exemplos/Torre de Belem.jpg" alt="Image 7">
            </div>
            <div class="item">
                <img src="/img/exemplos/faialPico.jpg" alt="Image 8">
            </div>
            <div class="item">
                <img src="/img/exemplos/Sunset.jpeg" alt="Image 9">
            </div>
            <!-- Add more items as needed -->
        </div>

        <div class="nav-right">
            <button id="next-button" type="button" class="icon icon-secondary owl-nav right-nav">
                <i class="icon-chevron-right iconRight"></i>
            </button>
        </div>
    </div>
</div>

Carrosel de imagens tamanho S

                                            
<div class="gra-carousel-container carousel-s">
    <div class="active-image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
    </div>
    <div class="carousel-navigation">
        <div class="nav-left">
            <button id="prev-button" type="button" class="icon icon-secondary owl-nav left-nav">
                <i class="icon-chevron-left iconLeft"></i>
            </button>
        </div>
        <!-- Carousel -->
        <div id="image-carousel" class="owl-carousel">
            <div class="item">
                <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
            </div>
            <div class="item">
                <img src="/img/exemplos/Nascer-do-Sol-PDL.jpg" alt="Image 2">
            </div>
            <div class="item">
                <img src="/img/exemplos/coroa-da-mata-pm.jpg" alt="Image 3">
            </div>
            <div class="item">
                <img src="/img/exemplos/SaoMiguel.jpg" alt="Image 4">
            </div>
            <div class="item">
                <img src="/img/exemplos/sun-cesar.jpg" alt="Image 5">
            </div>
            <div class="item">
                <img src="/img/exemplos/pico-pordosol.jpg" alt="Image 6">
            </div>
            <div class="item">
                <img src="/img/exemplos/Torre de Belem.jpg" alt="Image 7">
            </div>
            <div class="item">
                <img src="/img/exemplos/faialPico.jpg" alt="Image 8">
            </div>
            <div class="item">
                <img src="/img/exemplos/Sunset.jpeg" alt="Image 9">
            </div>
            <!-- Add more items as needed -->
        </div>

        <div class="nav-right">
            <button id="next-button" type="button" class="icon icon-secondary owl-nav right-nav">
                <i class="icon-chevron-right iconRight"></i>
            </button>
        </div>
    </div>
</div>

Carousel de imagens - Mobile

                                            
<div class="gra-carousel-container carousel-mobile">
    <div class="active-image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
    </div>
    <div class="carousel-navigation">
        <div class="nav-left">
            <button id="prev-button" type="button" class="icon icon-secondary owl-nav left-nav">
                <i class="icon-chevron-left iconLeft"></i>
            </button>
        </div>
        <!-- Carousel -->
        <div id="image-carousel" class="owl-carousel">
            <div class="item">
                <img src="/img/exemplos/costa_norte_SM.jpg" alt="Image 1">
            </div>
            <div class="item">
                <img src="/img/exemplos/Nascer-do-Sol-PDL.jpg" alt="Image 2">
            </div>
            <div class="item">
                <img src="/img/exemplos/coroa-da-mata-pm.jpg" alt="Image 3">
            </div>
            <div class="item">
                <img src="/img/exemplos/SaoMiguel.jpg" alt="Image 4">
            </div>
            <div class="item">
                <img src="/img/exemplos/sun-cesar.jpg" alt="Image 5">
            </div>
            <div class="item">
                <img src="/img/exemplos/pico-pordosol.jpg" alt="Image 6">
            </div>
            <div class="item">
                <img src="/img/exemplos/Torre de Belem.jpg" alt="Image 7">
            </div>
            <div class="item">
                <img src="/img/exemplos/faialPico.jpg" alt="Image 8">
            </div>
            <div class="item">
                <img src="/img/exemplos/Sunset.jpeg" alt="Image 9">
            </div>
            <!-- Add more items as needed -->
        </div>

        <div class="nav-right">
            <button id="next-button" type="button" class="icon icon-secondary owl-nav right-nav">
                <i class="icon-chevron-right iconRight"></i>
            </button>
        </div>
    </div>
</div>