Evo Vue Carousel

Having tried many different carousel components over the years, we never quite found one that way built with a Vue-first approach, was compatible with SSR and still provided all the functionality we require… So we made one.

Quick Start

1<script setup>
2import { EvoVueCarousel, EVO_VUE_CAROUSEL_MODE } from "evo-vue-carousel";
3</script>
4
5<template>
6 <EvoVueCarousel
7 wrap
8 per-page="2"
9 slide-by="1"
10 :mode="EVO_VUE_CAROUSEL_MODE.slider"
11 :responsive="{
12 1280: {
13 perPage: 3
14 }
15 }"
16 >
17 <div v-for="slide in slides" :key="slide.id">
18 <img :src="slide.src" class="w-full h-full object-cover" />
19 </div>
20 </EvoVueCarousel>
21</template>

Using with Tailwind

import { evoVueCarouselTwContent } from "evo-vue-carousel/tailwind";
export default {
content: [
// Your other content
...evoVueCarouselTwContent()
],
// Other config
}

Props

PropTypeDescriptionDefault
autoplayBoolean | NumberTime in ms before the carousel automatically navigatesfalse
wrapBooleanCarousel should wrap to the beginning from the endfalse
hideNavigationBooleanDon’t show the navigation arrowsfalse
hidePaginationBooleanDon’t show the pagination dotsfalse
responsiveObjectResponsive settings (more below){}
perPageNumber | StringNumber of slides to show in the carousel viewport1
slideByNumber | StringNumber of slides to navigate by each time<page setting>
mode“gallery” | “slider”The functionality mode of the carousel“slider”
gapNumber | StringNumber of px gap to put between each slide0
pauseOnHoverBooleanPause autoplay when the carousel is being hovered overfalse
disableOnNavigationBooleanDisable navigation/pagination buttons while the carousel is navigatingfalse
transitionSpeedNumberThe speed of the transition, lower is slower200
viewportClassStringClass string to apply to the viewport<empty string>
paginationClassStringClass for the pagination container“flex justify-center gap-4 absolute bottom-0 w-full”
paginationBackgroundClassStringSeparate class string for the pagination container background“bg-zinc-900/10 py-1 backdrop-blur-sm”
paginationItemClassStringClass for each pagination item“border-white/50 border-2 rounded-full p-0.5 flex justify-center items-center hover:border-white/100 transition-colors duration-300”
paginationItemActiveClassStringClass for the active pagination item“pointer-events-none”
paginationItemDotClassStringClass for the dot inside each pagination item“rounded-full origin-center scale-0 bg-white/50 transition-transform”
paginationItemSizeClassStringSeparate size class for each pagination item“size-4”
paginationItemDotActiveClassStringClass for the dot inside the active pagination item“scale-100 bg-white/70”
navigationClassStringClass for the navigation container“absolute top-1/2 left-0 right-0 -translate-y-1/2 flex items-center justify-between”
navigationItemClassStringClass applied to each navigation item“relative before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity hover:before:opacity-10 active:before:opacity-20 before:duration-300 disabled:pointer-events-none disabled:opacity-30 transition-opacity”
navigationItemSizeClassStringSeparate size class for each navigation item“size-16”
navigationPrevClassStringClass for the ‘previous’ navigation button“-translate-x-full”
navigationNextClassStringClass for the ‘next’ navigation button“translate-x-full”
slideTransitionTimingClassStringClass which controls the slide transition timing function“ease-linear”

Responsive config

The responsive config object applies additional overrides to the default config when the current screen size is equal or greater than the declared breakpoint key.

The following properties can be included in responsive objects:

  • perPage
  • mode
  • autoplay
  • wrap
  • gap
  • slideBy
  • transitionSpeed
  • pauseOnHover
  • slideTransitionTimingClass
  • hideNavigation
  • hidePagination

An example responsive object might be:

1<template>
2 <EvoVueCarousel
3 per-page="1"
4 slide-by="1"
5 :responsive="{
6 576: {
7 perPage: 2,
8 wrap: true
9 },
10 1280: {
11 perPage: 3,
12 wrap: true
13 }
14 }"
15 >
16 <!-- SLIDES -->
17 </EvoVueCarousel>
18<template>

Note that responsive configs aren’t cumulative, only the one active will merge/override the default settings.

Part of evoMark's contribution to Free and Open Source Software (FOSS)

To read more about evoMark and our open-source software, head to our Open-Source Software page

npm i evo-vue-carousel
Get in Touch

Get in touch with us today 01202 790300

monday 09:00 - 17:00
tuesday 09:00 - 17:00
wednesday 09:00 - 17:00
thursday 09:00 - 17:00
friday 09:00 - 16:00
saturday Closed
sunday Closed