Easy Carousel

Instalação / Início

O Easy Carousel é feito da forma mais minimalista possível e sem nenhuma dependência, basta copiar os arquivos easycarousel.js e easycarousel.css para o seu projeto, apenas o essencial está presente no código base, o que possibilita uma estilização completamente livre e a ausência de configuração JS, desde que siga o padrão da ferramenta que será visto abaixo.

Download

Padrão HTML

Coloque dentro de qualquer tag a estrutura do carrossel presente abaixo, também é possível remover as tags .carousel-control e .carousel-dots caso opte por um layout mais limpo, ou até mesmo coloca-las dentro ou fora do carrossel (como mostram as linhas comentadas).


<div class="carousel-container">
    <div class="carousel">
        <button class="carousel-control absolute prev" type="button"> « </button>
        <button class="carousel-control absolute next" type="button"> » </button>
        <!-- <button class="carousel-control absolute prev" type="button"> « </button> -->
        <!-- <button class="carousel-control absolute next" type="button"> » </button> -->
        <div class="carousel-slider">
        <!-- <div class="carousel-slider gap" -->

            <div class="carousel-slide">
                <span>Content 1</span>
            </div>
            <div class="carousel-slide">
                <span>Content 2</span>
            </div>
            <div class="carousel-slide">
                <span>Content 3</span>
            </div>

        </div>
        <!-- <div class="carousel-dots absolute"></div> -->
    </div>
    <div class="carousel-dots"></div>
</div>

Após a criação do carrossel conforme visto acima, referencie-os no script, caso queira que o carrossel passe os slides automaticamente, basta informar o intervalo de tempo em ms após o querySelector, seguindo o exemplo a baixo.


<script src="easycarousel.js"></script>
<script>
    new EasyCarousel(document.querySelector('.carousel-container'))
    new EasyCarousel(document.querySelector('.carousel-container.segundo'), 5000)
</script>

Padrão CSS

Como foi comentado, o carrossel tem um estilo minimalista, não é necessário nenhuma alteração no arquivo CSS, caso queira mudar algo como cor, borda, tamanho etc. basta estilizar suas classes em um CSS à parte.
A classe .carousel-slide segue uma regra de estilização para que tudo funcione corretamente, para alterar a quantidade de slides mostrados em tela no carrossel, utilize apenas min-width.


/* 4 slides em tela - desktop */
.carousel-container-xxx .carousel-slide{
    min-width: 25%; /* ou */ min-width: calc(100%/4);
}

/* 2 slides em tela - mobile */
@media (max-width: 425px) {
    .carousel-container-xxx .carousel-slide{
        min-width: 50%; /* ou */ min-width: calc(100%/2);
    }
}

OBS: nunca coloque margin no .carousel-slide, isso pode quebrar o funcionamento do slider, caso queira espaçar os slides, utilize div interna, como mostram os exemplos na proxima sessão.

Exemplos de uso

Como o Easy Carousel não possui nenhuma estilização e seu script se adapta automaticamente ao conteúdo do container, é possível criar qualquer coisa, o céu é o limite! Veja alguns exemplos abaixo, seguido de seus códigos.

.carousel-dot & .carousel-control

Exemplos de formas de uso dos dots e botões de controle do carrossel, utilizando a estilização padrão (limpa).

Dots e controls fora do carrossel


<div class="carousel">
    <button class="carousel-control prev" type="button"> « </button>
    <div class="carousel-slider">

        <div class="carousel-slide">
        <span>Content 1</span>
        </div>
        <div class="carousel-slide">
        <span>Content 2</span>
        </div>
        <div class="carousel-slide">
        <span>Content 3</span>
        </div>

    </div>
    <button class="carousel-control next" type="button"> » </button>
</div>
<div class="carousel-dots"></div>


<script>
  new EasyCarousel(
    document.querySelector(".carousel"), 5000
  );
</script>

Content 1

Content 2

Content 3

Dots e controls dentro do carrossel


<div class="carousel">
    <button class="carousel-control absolute prev" type="button"> « </button>
    <button class="carousel-control absolute next" type="button"> » </button>
    <div class="carousel-slider">

        <div class="carousel-slide">
            <span>Content 1</span>
        </div>
        <div class="carousel-slide">
            <span>Content 2</span>
        </div>
        <div class="carousel-slide">
            <span>Content 3</span>
        </div>

    </div>
    <div class="carousel-dots absolute"></div>
</div>


<script>
  new EasyCarousel(
    document.querySelector(".carousel"), 5000
  );
</script>

Content 1

Content 2

Content 3

Sem dots e controls


<div class="carousel">
    <div class="carousel-slider">

        <div class="carousel-slide">
            <span>Content 1</span>
        </div>
        <div class="carousel-slide">
            <span>Content 2</span>
        </div>
        <div class="carousel-slide">
            <span>Content 3</span>
        </div>
        
    </div>
</div>


<script>
  new EasyCarousel(
    document.querySelector(".carousel"), 5000
  );
</script>

Content 1

Content 2

Content 3

.carousel-slide

Exemplos de formas de uso dos slides do carrossel, utilizando a estilização padrão (limpa).

4 slides no desktop, 2 slides no tablet e 1 slide no mobile (redimensione a tela)


<div class="carousel">
    <button class="carousel-control absolute prev" type="button"> « </button>
    <button class="carousel-control absolute next" type="button"> » </button>
    <div class="carousel-slider">

        <div class="carousel-slide">
            <span>Content 1</span>
        </div>
        <div class="carousel-slide">
            <span>Content 2</span>
        </div>
        <div class="carousel-slide">
            <span>Content 3</span>
        </div>
        <div class="carousel-slide">
            <span>Content 4</span>
        </div>
        <div class="carousel-slide">
            <span>Content 5</span>
        </div>
        <div class="carousel-slide">
            <span>Content 6</span>
        </div>

    </div>
    <div class="carousel-dots absolute"></div>
</div>


.carousel-slide {
    min-width: 25%;
}

@media (max-width: 768px) {
    .carousel-slide {
        min-width: 50%;
    }
}

@media (max-width: 425px) {
    .carousel-slide {
        min-width: 100%;
    }
}


<script>
  new EasyCarousel(
    document.querySelector(".carousel"), 5000
  );
</script>

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Slides com margin


<div class="carousel">
    <button class="carousel-control absolute prev" type="button"> « </button>
    <button class="carousel-control absolute next" type="button"> » </button>
    <!-- basta adicionar a classe "gap" no 'carousel-slider' -->
    <div class="carousel-slider gap">

        <div class="carousel-slide">
            <div>
                <span>Content 1</span>
            </div>
        </div>
        <div class="carousel-slide">
            <div>
                <span>Content 2</span>
            </div>
        </div>
        <div class="carousel-slide">
            <div>
                <span>Content 3</span>
            </div>
        </div>
        <div class="carousel-slide">
            <div>
                <span>Content 4</span>
            </div>
        </div>

    </div>
    <div class="carousel-dots absolute"></div>
</div>


<script>
  new EasyCarousel(
    document.querySelector(".carousel"), 5000
  );
</script>

Content 1

Content 2

Content 3

Content 4

Easy Carousel

Sobre o carrossel

Sem Configuração

Leve

Javascript Puro

Responsivo

Gestos

Teclas

Fácil

Inteligente

Limpo

Funcionamento Individual

Instalação / Início

Padrão HTML

Padrão CSS

Exemplos de uso

.carousel-dot & .carousel-control

.carousel-slide