# CCarousel

O componente CCarousel permite exibir mais informações com menos espaço, usando slides. Útil para criar assistentes ou uma galeria de imagens também.

Exemplos

API

# Exemplos do CCarousel

# Padrão

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor sed arcu imperdiet lacinia. Aenean nec rutrum mi.

<template>
  <div>
    <c-carousel 
      :show-pagination="pagination" 
      :perView="4" 
      :options="options"
    >
      <c-carousel-slide v-for="item in items" :key="item">
        <c-product-card>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor sed arcu imperdiet lacinia. Aenean nec rutrum mi.
        </c-product-card>
      </c-carousel-slide>
    </c-carousel>
  </div>
</template>

<script>
  module.exports = {
    data: () => ({
      options: {},
      pagination: true,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    })
  }
</script>
<template>
  <div>
    <c-carousel 
      :show-pagination="pagination" 
      :perView="4" 
      :options="options"
    >
      <c-carousel-slide v-for="item in items" :key="item">
        <c-product-card>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor sed arcu imperdiet lacinia. Aenean nec rutrum mi.
        </c-product-card>
      </c-carousel-slide>
    </c-carousel>
  </div>
</template>

<script>
  module.exports = {
    data: () => ({
      options: {},
      pagination: true,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    })
  }
</script>

# CCarousel Responsivo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor sed arcu imperdiet lacinia. Aenean nec rutrum mi.

<template>
  <div>
    <c-carousel 
      :show-pagination="pagination" 
      :carousel-breakpoints="carouselBreakpoints"
      name="carousel-2"
    >
      <c-carousel-slide v-for="item in items" :key="item">
        <c-product-card>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor sed arcu imperdiet lacinia. Aenean nec rutrum mi.
        </c-product-card>
      </c-carousel-slide>
    </c-carousel>
  </div>
</template>

<script>
  module.exports = {
    data: () => ({
      pagination: true,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      carouselBreakpoints: {
        768: {
          slidesPerView: 1,
          spaceBetween: 10
        },
        1024: {
          slidesPerView: 3,
          spaceBetween: 15
        },
        1440: {
          slidesPerView: 4,
          spaceBetween: 20
        }
      }
    }),
  }
</script>
<template>
  <div>
    <c-carousel 
      :show-pagination="pagination" 
      :carousel-breakpoints="carouselBreakpoints"
      name="carousel-2"
    >
      <c-carousel-slide v-for="item in items" :key="item">
        <c-product-card>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor sed arcu imperdiet lacinia. Aenean nec rutrum mi.
        </c-product-card>
      </c-carousel-slide>
    </c-carousel>
  </div>
</template>

<script>
  module.exports = {
    data: () => ({
      pagination: true,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      carouselBreakpoints: {
        768: {
          slidesPerView: 1,
          spaceBetween: 10
        },
        1024: {
          slidesPerView: 3,
          spaceBetween: 15
        },
        1440: {
          slidesPerView: 4,
          spaceBetween: 20
        }
      }
    }),
  }
</script>

Nome	Tipo	Default	Descrição
carouselBreakpoints	`object`		Define as opções do carousel responsivo.
horizontalOverflow	`boolean`	`false`	Mostra os itens que estão fora, da quantidade definida no `perView`.
name	`string`	`MyCCarousel`	Identificador do carousel.
navigationSpace	`object`		Pode definir duas posições: `left` e `right`.
options	`object`		Define as opções do componente `swiper` (opens new window).
perView	`number`, `string`	`auto`	Quantidade de itens visíveis.
showNavigation	`boolean`	`true`	Mostra as setas de navegação do carousel.
showPagination	`boolean`	`false`	Mostra a paginação do carousel.

# CCarousel

# Exemplos do CCarousel

# Padrão

# CCarousel Responsivo

# CCarousel API

# Props