Modern lightweight Vue 3 carousel component

Overview

Vue 3 Carousel

Modern lightweight Vue 3 carousel component

npm npm

Documentation

https://ismail9k.github.io/vue3-carousel/

TODO

  • Responsive breakpoints
  • Mouse/touch dragging
  • Infinity scroll (wrapping around)
  • Auto play
  • RTL
  • Vertical scroll
  • Sync multiple carousel
  • Enrich a11y

Getting started

Installation

First step is to install it using yarn or npm:

npm install vue3-carousel

# or use yarn
yarn add vue3-carousel

Basic Using

<template>
  <carousel :items-to-show="1.5">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    slide>

    <template #addons>
      <navigation />
      <pagination />
    template>
  carousel>
template>

<script>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

export default {
  name: 'App',
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
};
script>

Available Props

Prop Default Description
itemsToShow 1 count of items to showed per view (can be a fraction).
currentSlide 0 index number of the initial slide.
wrapAround false enable infinite scrolling mode.
snapAlign 'center' controls the carousel position alignment, can be 'start', 'end', or 'center'
transition 300 sliding transition time in ms.
settings { } an object to pass all settings.
breakpoints null an object to pass all the breakpoints settings.
Issues
  • customize the nav arrows

    customize the nav arrows

    I was just curious if it was possible to customize the nav arrows. I tried targeting the css selector class and the button with no success. I know I can go into the npm module and update it there, but that is inefficient, because if do a fresh npm install I will lose the change.

    :page_facing_up: documentation 
    opened by DBereznak 7
  • Problems when sliding

    Problems when sliding

    (used with vue and ionic)

    It always stays at page one whatever you do. But if I change the window size it will work again.

    Code:

    <template>
      <Carousel>
        <Slide v-for="slide in 10" :key="slide">
          <div style="width:50px;background-color:purple">{{ slide }}</div>
        </Slide>
    
        <template #addons>
          <Navigation />
          <Pagination />
        </template>
      </Carousel>
    </template>
    
    <script lang="ts">
    import "vue3-carousel/dist/carousel.css";
    import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
    export default {
      name: "Tab1",
      components: {
        Carousel,
        Slide,
        Pagination,
        Navigation,
      },
    };
    </script>
    
    :space_invader: invalid 
    opened by weathon 6
  • Slide order: -1 when carousel has only one item or after element was added in carousel.

    Slide order: -1 when carousel has only one item or after element was added in carousel.

    My template:

    <carousel v-if="presentedVideos.length"  :wrap-around="true">
      <slide class="slide" v-for="video in presentedVideos" :key="video.id">
         <iframe class="videoFile" :src="video.video_link"></iframe>
      </slide>
      <template #addons>
        <navigation />
      </template>
    </carousel>
    
    1. When presentedVideos ref contains only one item in array - carousel has crashed. I can't slide anymore. Screenshot from 2021-04-05 15-12-42 Element outside

    2. Same problem when I add new instance. Screenshot from 2021-04-06 12-18-16 (after reload problem disappears)

    3. Another case when I remove instance. I'm using this way - https://github.com/ismail9k/vue3-carousel/issues/36#issuecomment-813019681 Carousel items is not updating immediately. I should click on the slide arrows. After that removed instance is disappeared.

    :bug: bug 
    opened by slobodadev 4
  • slides without v-for not working

    slides without v-for not working

    Describe the bug

    When i make manual slides, arrows not working

    To Reproduce

    It works

        <carousel :items-to-show="1">
              <slide  v-for="slide in 10" :key="slide">
                        {{slide}}
               </slide>
          
          <template #addons>
          <navigation />
            <pagination /> 
          </template>
        </carousel>
    
    

    It not works

        <carousel :items-to-show="1">
              <slide >
                        <p>1</p>
               </slide>
             <slide >
                        <p>2</p>
               </slide>
          
          <template #addons>
          <navigation />
            <pagination /> 
          </template>
        </carousel>
    
    

    thanks.

    :bug: bug 
    opened by SantiagoAndre 4
  • Pagination does not work with breakpoints

    Pagination does not work with breakpoints

    Describe the bug When addon Pagination is included it does not reflect breakpoints. So it shows more page fields then there are itemsToShow.

    opened by michalpaukert 4
  • wrapAround not working properly

    wrapAround not working properly

    WrapAround not working properly when using 2 carousels on the same page, One always resets when clicking on next/previous.

    :bug: bug 
    opened by Capaldi96 3
  • Ref is not updating on template in carousel component

    Ref is not updating on template in carousel component

    Data is not updating on tempate when you add/remove instance

    <carousel v-if="presentedImages.length" :items-to-show="2" :snapAlign="'start'" :breakpoints="breakpoints" :wrap-around="true">
        <slide class="slide" v-for="image in presentedImages" :key="image.id">
            <img v-if="image.attachment_url" class="videoFile" :src="image.attachment_url" />
            <div  @click="deleteImage(image.id)" class="fa-stack remove-button cross-btn">
              <i class="fa fa-times"></i>
            </div>
        </slide>
        <template #addons>
            <navigation />
        </template>
    </carousel>
    
    const { images: presentedImages } = toRefs(props);
    const deleteImage = (id) => {
        removeAttachment(id).then(res => {
          presentedImages.value = presentedImages.value.filter(img => {
            return img.id !== id;
          });
        })
        .catch(err => console.log(err))
      }
          
    

    FYI: Ref is updating in script.

    Originally posted by @slobodadev in https://github.com/ismail9k/vue3-carousel/discussions/33

    opened by slobodadev 2
  • Missing callback's

    Missing callback's

    I am missing the callback to destory if only one slide, or show no arrows on single slide

    Describe the solution you'd like I wanted to automate this to show no navigation/pagination/drag/slide if only single slide

    Describe alternatives you've considered create callbacks or remove those arrows and drag slide function

    Additional context Thanks you for simple carousel :D

    :star2: enhancement 
    opened by seetpalsingh 2
  • Sliders is not updating immediately when you remove a slide

    Sliders is not updating immediately when you remove a slide

    @ismail9k Still exits the problem with dynamic data. When you remove an instance, the changes is not appearing immediately. You should refresh the page. Even a bad solution with forceUpdate doesn't work

    Originally posted by @slobodadev in https://github.com/ismail9k/vue3-carousel/issues/37#issuecomment-817788593

    opened by slobodadev 2
  • Can't click inside of a slide

    Can't click inside of a slide

    Describe the bug If you have a button to click on into a slide, the mobile will treat the click as a drag and it does nothing when you click on it.

    To Reproduce Steps to reproduce the behavior:

    1. Add a
    2. Click on it on mobile (Chrome's inspect element with toggle device toolbar on works also)
    3. Nothing happens

    Expected behavior The click event is treated differently than the drag event and the button does what was meant to do.

    :bug: bug 
    opened by cs1m0n 2
  • Hello, what's the timeline for the roadmap? I am keenly waiting on the very next checkbox -> being able to style the active/inactive slides to create a coverflow effect etc. I ❤️  the stability/minimalism on this component!

    Hello, what's the timeline for the roadmap? I am keenly waiting on the very next checkbox -> being able to style the active/inactive slides to create a coverflow effect etc. I ❤️ the stability/minimalism on this component!

    Hello, what's the timeline for the roadmap? I am keenly waiting on the very next checkbox -> being able to style the active/inactive slides to create a coverflow effect etc. I ❤️ the stability/minimalism on this component!

    Originally posted by @oneWaveAdrian in https://github.com/ismail9k/vue3-carousel/discussions/32#discussioncomment-940702

    opened by ismail9k 0
  • Not working with dynamic componnet as a slide

    Not working with dynamic componnet as a slide

    Describe the bug When another component is used inside slide it is not compiled and is treated like a unknown tag

    To Reproduce https://codesandbox.io/s/practical-morning-96bng?file=/src/components/MyCarousel.vue

    Expected behavior Requested Component is rendered inside the slide

    opened by Exlord 0
  • Weird behaviour with 3 slides in Carousel

    Weird behaviour with 3 slides in Carousel

    I experience a weird behaviour when the amount of slides are the same as the itemsToShow. When having 3 slides only 2 of them appears, 3rd is hidden. (Example)

    :bug: bug 
    opened by Icepick 1
  • Bug with 2 slides in Carousel

    Bug with 2 slides in Carousel

    Carousel slide goes forward (translateX: -308px) by click carousel__prev. This bug appears if you have 2 slides in your Carousel with wrapAround="true".

    opened by Nick1Muse 1
  • What is the plan for RTL support ?

    What is the plan for RTL support ?

    :star2: enhancement 
    opened by mohamednagy 1
  • wrapAround not working in breakpoints

    wrapAround not working in breakpoints

    When I have :wrapAround="true" set on the carousel element, wrapAround works fine. However, I want to only have pagination (and therefore wrapAround) on smaller page sizes. If you have wrapAround on the carousel element, the slides appear out of order on large screen sizes. However, if you supply wrapAround: true in the breakpoints object, it breaks entirely.

    Codepen here: https://codepen.io/eileengmccall/pen/PopozBp

    You'll notice that if you shrink down the screen so the breakpoint activates, the number on the slide jumps to 5 and stays there as soon as you try to paginate.

    Any help would be appreciated!

    :bug: bug 
    opened by EileenMcCall 2
  • Not working when sliding twice on in-app-browser(web view)

    Not working when sliding twice on in-app-browser(web view)

    Describe the bug

    Not working when sliding twice on in-app-browser(facebook...etc). but i can use next-button to be next-content.

    Smartphone (please complete the following information):

    • Device: iPhoneXS
    • OS: iOS 14.4
    • Browser: Facebook in-app-browser
    opened by linmasahiro 0
  • Sliding does notwork on iOS

    Sliding does notwork on iOS

    Describe the bug Sliding in the basic vue carousel example does not work on an iPhone Xs.

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'https://ismail9k.github.io/vue3-carousel/examples.html.'
    2. Try to slide to the right
    3. Does not work

    Smartphone (please complete the following information):

    • Device:[e.g. iPhone Xs
    • OS: e.g. 14.4
    • Browser stock safari

    We also tried to embed the carousel into our website, which also did not work on various iPhone models.

    opened by Tettsch 2
  • is it compatible with vue2?

    is it compatible with vue2?

    opened by bruno2kd 3
Owner
Abdelrahman Ismail
Full-Stack JavaScript Developer
Abdelrahman Ismail
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay

vue-slick-carousel ?? Vue Slick Carousel with True SSR Written for Faster Luxstay. This Is a Port of react-slick. ?? Features simple center mode multi

GSSHOP 525 Jul 23, 2021
A flexible, responsive, touch-friendly carousel for Vue.js

Vue Carousel WARNING: vue-carousel is at pre-alpha stage of development and may undergo significant changes. Feel free to submit issues and feature re

null 1.6k Jul 23, 2021
vue轮播卡片组件(vue carousel card component)

vue轮播卡片组件(vue carousel card component)

jekorx 8 Jun 23, 2021
A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.

vue-l-carousel A responsive carousel(namely slider or swiper) component for Vue.js v2.x+. Live demo Pull requests are welcome :) License LGPL-V3 Featu

Light Leung 56 Mar 2, 2021
Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js

Vue Carousel 3d The repository is back in action. I'll try to keep it updated and to merge pull requests occasionally. Also, some new features are com

Vladimir 801 Jul 20, 2021
Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js

Vue Carousel 3d The repository is back in action. I'll try to keep it updated and to merge pull requests occasionally. Also, some new features are com

Vladimir 801 Jul 24, 2021
Modern lightweight Vue 3 carousel component

Modern lightweight Vue 3 carousel component

Abdelrahman Ismail 78 Jul 22, 2021
Vue component for Owl Carousel 2

Intro The VueJS wrapper for Owl Carousel. Owl Carousel is touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Ext

Leo Chien 129 Jun 6, 2021
🎠 A carousel component for Vue.js

vue-agile A carousel component for Vue.js inspired by Slick. Powerful, responsive, touch-friendly, with Nuxt.js SSR support, without a jQuery dependen

Łukasz Florczak 1.2k Jul 23, 2021
⚡️ Lightweight Carousel based on CSS Scroll Snapping (Vue 2/3)

vue-snap Lightweight Carousel based on CSS Scroll Snap. Table of Contents About Examples/Stories Pros Installation & Usage [email protected] version [email protected] version

Bartosz Dominiak 91 Jul 25, 2021
A Vue Slider / Carousel Component for Flickity.js

Flickity for Vue.js A Vue Component for Flickity.js - See a live demo here. Vue support Supports only Vue >= 2 Installation and usage See official doc

Drew Bartlett 358 Jul 22, 2021
🎠 A customizable accessible carousel slider optimized for Vue

Hooper Vue.js carousel component, optimized to work with Vue. Features Easily customizable through rich API and addons. Touch, Keyboard, Mouse Wheel,

Baianat 597 Jul 20, 2021
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

?? ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

NAVER 1.7k Jul 23, 2021
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 28k Jul 25, 2021