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.<\/p>\n\n\n\n

Requirements<\/h2>\n\n\n\n

\n
• Vue 3.5+<\/li>\n\n\n\n
• TailwindCSS<\/li>\n<\/ul>\n\n\n\n

  Quick Start<\/h2>\n\n\n\n

  1<\/span><<\/span>script<\/span> <\/span>setup<\/span>><\/span><\/span><\/span><\/div>
  2<\/span><\/span>import<\/span> <\/span>{<\/span> <\/span>EvoVueCarousel<\/span>,<\/span> <\/span>EVO_VUE_CAROUSEL_MODE<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>\"evo-vue-carousel\"<\/span>;<\/span><\/span><\/span><\/div>
  3<\/span><\/span><\/<\/span>script<\/span>><\/span><\/span><\/span><\/div>
  4<\/span>\n<\/span><\/span><\/div>
  5<\/span><\/span><<\/span>template<\/span>><\/span><\/span><\/span><\/div>
  6<\/span>\t<\/span><<\/span>EvoVueCarousel<\/span> <\/span><\/span><\/div>
  7<\/span>\t\t<\/span>wrap<\/span> <\/span><\/span><\/div>
  8<\/span>\t\t<\/span>per-page<\/span>=<\/span>\"<\/span>2<\/span>\"<\/span> <\/span><\/span><\/div>
  9<\/span>\t\t<\/span>slide-by<\/span>=<\/span>\"<\/span>1<\/span>\"<\/span> <\/span><\/span><\/div>
  10<\/span>\t\t<\/span>:mode<\/span>=<\/span>\"<\/span>EVO_VUE_CAROUSEL_MODE.slider<\/span>\"<\/span><\/span><\/span><\/div>
  11<\/span>\t\t<\/span>:responsive<\/span>=<\/span>\"<\/span>{<\/span><\/span><\/div>
  12<\/span>\t\t\t1280: {<\/span><\/span><\/div>
  13<\/span>\t\t\t\tperPage: 3<\/span><\/span><\/div>
  14<\/span>\t\t\t}<\/span><\/span><\/div>
  15<\/span>\t\t}<\/span>\"<\/span><\/span><\/span><\/div>
  16<\/span>\t<\/span>><\/span><\/span><\/span><\/div>
  17<\/span>\t\t<\/span><<\/span>div<\/span> <\/span>v-for<\/span>=<\/span>\"<\/span>slide in slides<\/span>\"<\/span> <\/span>:key<\/span>=<\/span>\"<\/span>slide.id<\/span>\"<\/span>><\/span><\/span><\/span><\/div>
  18<\/span>\t\t\t<\/span><<\/span>img<\/span> <\/span>:src<\/span>=<\/span>\"<\/span>slide.src<\/span>\"<\/span> <\/span>class<\/span>=<\/span>\"<\/span>w-full h-full object-cover<\/span>\"<\/span> <\/span>\/><\/span><\/span><\/span><\/div>
  19<\/span>\t\t<\/span><\/<\/span>div<\/span>><\/span><\/span><\/span><\/div>
  20<\/span>\t<\/span><\/<\/span>EvoVueCarousel<\/span>><\/span><\/span><\/span><\/div>
  21<\/span><\/span><\/<\/span>template<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\n
  Using with Tailwind<\/h2>\n\n\n\n
  Evo Vue Carousel was built for use with projects using Tailwind as its CSS framwork. And does not presently work without it.<\/p>\n\n\n\n
  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.<\/p>\n\n\n\n
  import<\/span> <\/span>{<\/span> evoVueCarouselTwContent <\/span>}<\/span> <\/span>from<\/span> <\/span>\"evo-vue-carousel\/tailwind\"<\/span>;<\/span><\/span><\/div>
  \n<\/span><\/div>
  <\/span>export<\/span> <\/span>default<\/span> <\/span>{<\/span><\/span><\/div>
  \t<\/span>content<\/span>:<\/span> <\/span>[<\/span><\/span><\/div>
  \t\t<\/span>\/\/ Your other content<\/span><\/span><\/div>
  \t\t<\/span>...<\/span>evoVueCarouselTwContent<\/span>(<\/span>)<\/span><\/span><\/div>
  \t<\/span>]<\/span>,<\/span><\/span><\/div>
  \t<\/span>\/\/ Other config<\/span><\/span><\/div>
  <\/span>}<\/span><\/div><\/code><\/pre><\/div>\n\n\n\n
  Props<\/h2>\n\n\n\n
  Prop<\/th>
  Type<\/th>
  Description<\/th>
  Default<\/th><\/tr><\/thead>
  autoplay<\/td>
  Boolean | Number<\/td>
  Time in ms before the carousel automatically navigates<\/td>
  false<\/td><\/tr>
  wrap<\/td>
  Boolean<\/td>
  Carousel should wrap to the beginning from the end<\/td>
  false<\/td><\/tr>
  hideNavigation<\/td>
  Boolean<\/td>
  Don’t show the navigation arrows<\/td>
  false<\/td><\/tr>
  hidePagination<\/td>
  Boolean<\/td>
  Don’t show the pagination dots<\/td>
  false<\/td><\/tr>
  responsive<\/td>
  Object<\/td>
  Responsive settings (more below)<\/td>
  {}<\/td><\/tr>
  perPage<\/td>
  Number | String<\/td>
  Number of slides to show in the carousel viewport<\/td>
  1<\/td><\/tr>
  slideBy<\/td>
  Number | String<\/td>
  Number of slides to navigate by each time<\/td>
  <page setting><\/td><\/tr>
  mode<\/td>
  “gallery” | “slider”<\/td>
  The functionality mode of the carousel<\/td>
  “slider”<\/td><\/tr>
  gap<\/td>
  Number | String<\/td>
  Number of px gap to put between each slide<\/td>
  0<\/td><\/tr>
  pauseOnHover<\/td>
  Boolean<\/td>
  Pause autoplay when the carousel is being hovered over<\/td>
  false<\/td><\/tr>
  disableOnNavigation<\/td>
  Boolean<\/td>
  Disable navigation\/pagination buttons while the carousel is navigating<\/td>
  false<\/td><\/tr>
  transitionSpeed<\/td>
  Number<\/td>
  The speed of the transition, lower is slower<\/td>
  200<\/td><\/tr>
  viewportClass<\/td>
  String<\/td>
  Class string to apply to the viewport<\/td>
  <empty string><\/td><\/tr>
  paginationClass<\/td>
  String<\/td>
  Class for the pagination container<\/td>
  “flex justify-center gap-4 absolute bottom-0 w-full”<\/td><\/tr>
  paginationBackgroundClass<\/td>
  String<\/td>
  Separate class string for the pagination container background<\/td>
  “bg-zinc-900\/10 py-1 backdrop-blur-sm”<\/td><\/tr>
  paginationItemClass<\/td>
  String<\/td>
  Class for each pagination item<\/td>
  “border-white\/50 border-2 rounded-full p-0.5 flex justify-center items-center hover:border-white\/100 transition-colors duration-300”<\/td><\/tr>
  paginationItemActiveClass<\/td>
  String<\/td>
  Class for the active pagination item<\/td>
  “pointer-events-none”<\/td><\/tr>
  paginationItemDotClass<\/td>
  String<\/td>
  Class for the dot inside each pagination item<\/td>
  “rounded-full origin-center scale-0 bg-white\/50 transition-transform”<\/td><\/tr>
  paginationItemSizeClass<\/td>
  String<\/td>
  Separate size class for each pagination item<\/td>
  “size-4”<\/td><\/tr>
  paginationItemDotActiveClass<\/td>
  String<\/td>
  Class for the dot inside the active pagination item<\/td>
  “scale-100 bg-white\/70”<\/td><\/tr>
  navigationClass<\/td>
  String<\/td>
  Class for the navigation container<\/td>
  “absolute top-1\/2 left-0 right-0 -translate-y-1\/2 flex items-center justify-between”<\/td><\/tr>
  navigationItemClass<\/td>
  String<\/td>
  Class applied to each navigation item<\/td>
  “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”<\/td><\/tr>
  navigationItemSizeClass<\/td>
  String<\/td>
  Separate size class for each navigation item<\/td>
  “size-16”<\/td><\/tr>
  navigationPrevClass<\/td>
  String<\/td>
  Class for the ‘previous’ navigation button<\/td>
  “-translate-x-full”<\/td><\/tr>
  navigationNextClass<\/td>
  String<\/td>
  Class for the ‘next’ navigation button<\/td>
  “translate-x-full”<\/td><\/tr>
  slideTransitionTimingClass<\/td>
  String<\/td>
  Class which controls the slide transition timing function<\/td>
  “ease-linear”<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
  Responsive config<\/h2>\n\n\n\n
  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.<\/p>\n\n\n\n
  The following properties can be included in responsive objects:<\/p>\n\n\n\n
  \n
  perPage<\/li>\n\n\n\n
  mode<\/li>\n\n\n\n
  autoplay<\/li>\n\n\n\n
  wrap<\/li>\n\n\n\n
  gap<\/li>\n\n\n\n
  slideBy<\/li>\n\n\n\n
  transitionSpeed<\/li>\n\n\n\n
  pauseOnHover<\/li>\n\n\n\n
  slideTransitionTimingClass<\/li>\n\n\n\n
  hideNavigation<\/li>\n\n\n\n
  hidePagination<\/li>\n<\/ul>\n\n\n\n
  An example responsive object might be:<\/p>\n\n\n\n
  1<\/span><<\/span>template<\/span>><\/span><\/span><\/span><\/div>
  2<\/span>\t<\/span><<\/span>EvoVueCarousel<\/span> <\/span><\/span><\/div>
  3<\/span>\t\t<\/span>per-page<\/span>=<\/span>\"<\/span>1<\/span>\"<\/span> <\/span><\/span><\/div>
  4<\/span>\t\t<\/span>slide-by<\/span>=<\/span>\"<\/span>1<\/span>\"<\/span> <\/span><\/span><\/div>
  5<\/span>\t\t<\/span>:responsive<\/span>=<\/span>\"<\/span>{<\/span><\/span><\/div>
  6<\/span>\t\t\t576: {<\/span><\/span><\/div>
  7<\/span>\t\t\t\tperPage: 2,<\/span><\/span><\/div>
  8<\/span>\t\t\t\twrap: true<\/span><\/span><\/div>
  9<\/span>\t\t\t},<\/span><\/span><\/div>
  10<\/span>\t\t\t1280: {<\/span><\/span><\/div>
  11<\/span>\t\t\t\tperPage: 3,<\/span><\/span><\/div>
  12<\/span>\t\t\t\twrap: true<\/span><\/span><\/div>
  13<\/span>\t\t\t}<\/span><\/span><\/div>
  14<\/span>\t\t}<\/span>\"<\/span><\/span><\/span><\/div>
  15<\/span>\t<\/span>><\/span><\/span><\/span><\/div>
  16<\/span>\t\t<\/span><!-- SLIDES --><\/span><\/span><\/span><\/div>
  17<\/span>\t<\/span><\/<\/span>EvoVueCarousel<\/span>><\/span><\/span><\/span><\/div>
  18<\/span><\/span><<\/span>template<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\n
  Note that responsive configs aren’t cumulative, only the one active will merge\/override the default settings.<\/p>\n\n\n\n
  <\/p>\n","protected":false},"excerpt":{"rendered":"
  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 Quick Start Using with Tailwind Evo Vue Carousel was built for use with projects using Tailwind as…<\/p>\n","protected":false},"author":2,"featured_media":726,"parent":218,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/open-source-software.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-723","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":6,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/723\/revisions"}],"predecessor-version":[{"id":733,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/723\/revisions\/733"}],"up":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/media\/726"}],"wp:attachment":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/media?parent=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}