Pure Carousel JS (purecarousel.js)

Um Carousel simples com efeitos de transition do CSS3 e Javascritp PURO

Como Utilizar

Para utilizar basta chamar o arquivo .js do plugin no footer:

<script src="purecarousel.min.js"></script>

Basta declarar qualquer class sendo que seja inicializado posteriormente e os dois arrows:

<div class="container-carousel">
    <a id="prev" class="prev sprite-prev" title="Anterior"></a>
    <div class="carousel-content">
        <ul 
            class       = "carousel"
            data-next   = "#next"
            data-prev   = "#prev"
            data-amount = "3"
            data-row    = "2"
        >
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
            <li><img src="img/carousel.jpg" alt="" /></li>
        </ul>
    </div>  
    <a id="next" class="next sprite-next" title="Próximo"></a>
</div>

E também no footer: vamos inicializar nosso plugin declarando class e/ou seletor css do seu carousel.

<script>
    PureCarousel.init(".carousel"); 
</script>

Atributos ‘data’:

Como inicializa-los:

Data-next –> Você atribue a um seletor ID para um arrow de próximo;

Data-prev –> Você deve atribuir a um seletor ID para um arrow anterior;

Data-amount –> Quantidade de colunas ele irar pecorrer;

Data-row –> Quantidade de linhas irar ter o seu carousel;

data-next   = "selector #id"
data-prev   = "selector #id"
data-amount = "integer"
data-row    = "integer"

Link para o Github:
https://github.com/sirrommer/PureCarousel.js