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.

Requirements

• Vue 3.5+
• TailwindCSS

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

Evo Vue Carousel was built for use with projects using Tailwind as its CSS framwork. And does not presently work without it.

So as to tell your project which classes Evo Vue Carousel needs, you should import the following function and pass the (spread) output to your content array as shown below.

import { evoVueCarouselTwContent } from "evo-vue-carousel/tailwind";

export default {
	content: [
		// Your other content
		...evoVueCarouselTwContent()
	],
	// Other config
}

Props

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.