A touch ready and responsive slideshow / carousel for Vue & Vue 3.

Overview

Vueper Slides

Latest Version on NPM Software License npm npm

A touch ready and responsive slideshow / carousel for Vue and Vue 3.

Installation

npm install vueperslides

Vue 3

npm install [email protected]

Demo & Documentation

https://antoniandre.github.io/vueper-slides

Try it yourself

https://codepen.io/antoniandre/pen/jevjoQ


Browser Support

Chrome Firefox Safari Opera Edge IE
Latest Latest Latest Latest Latest 11+

Donation

If you want to support the project, you can buy me a beer or become a sponsor!

paypal Thank you!

If you are using this library for profit business, please consider backing me! It ensures that the project your products rely on keeps being actively maintained. :)


Contributing

If you have any idea, feel free to fork Vueper Slides and submit your changes back to me or discuss it in an issue.


Release Notes

  • Version 3.0 Supports Vue 3. This version is not compatible with Vue 2.x.
  • Version 2.8 Added lazy loading feature
  • Version 2.7 Added duration option on <vueper-slide> tag
  • Version 2.6 Added progress option
  • Version 2.5 Added parallaxFixedContent option
  • Version 2.4 Added the bullets & bullet slots
  • Version 2.3 Added gap option
  • Version 2.2 Allow syncing 2 slideshows + added previous & next emitted events
  • Version 2.1 Added fractions option
  • Version 2.0 Allow new Vue slot syntax & other improvements
  • Version 1.21.0 Allow external autoplay pause / resume
  • Version 1.20.0 Option to prevent Y-axis scroll while dragging
  • Version 1.19.0 Allow slide link on the entire slide
  • Version 1.18.0 Emit mouseenter mouseleave events on slides
  • Version 1.16.0 Change build system and external css file
  • Version 1.15.0 Added 3D Rotation feature
  • Version 1.14.0 Allow fade transition with multiple items per slide
  • Version 1.13.0 Allow multiple items per slide
  • Version 1.12.0 Added a no-shadow class to remove default inner shadow
  • Version 1.11.0 Allow slide background inside slide container
  • Version 1.10.0 Allow fixed height
  • Version 1.9.4 Added a method to refresh parallax
  • Version 1.9.1 Add onload parallax translation calculation
  • Version 1.9.0 Add previous() & next() methods for external controls
  • Version 1.8.0 Add animated class while slideshow is animated
  • Version 1.7.0 Improve slide data reactivity & allow to refresh clones on drag
  • Version 1.6.0 Externalize CSS & add accessibility attributes
  • Version 1.5.0 Add transition speed param & slide content outside above or under slideshow
  • Version 1.4.0 Allow complex slide title & content
  • Version 1.3.2 Add option to place arrows outside. The config is now VueJS-reactive
  • Version 1.3.0 Add parallax feature
  • Version 1.2.0 Add dragging distance feature
  • Version 1.1.0 Add breakpoints feature
  • Version 1.0.0 First public release
Issues
  • Feature request: mouseover and mouseleave events for individual slides to activate tooltip

    Feature request: mouseover and mouseleave events for individual slides to activate tooltip

    Hi Antoni

    I am really enjoying using vueper-slides. I think its great. Thanks for creating it!

    I am trying to show / hide a tooltip for each slide in the carousel but can't access the mouseover and mouseleave events for individual slides.

    Ideally, I would like to add @mouseover="active = true" @mouseleave="active = false" to each slide. So that the tooltip div can be toggled. Something like this:

    <vueper-slides><vueper-slide v-for="(slide, key) in slides" :key="key" :image="slide.image" @mouseover="active = true" @mouseleave="active = false"></vueper-slide></vueper-slides><div v-if="active" class="tooltip">{{selectedImage}}</div>

    Is this something that exists and if not, could you add this feature? I have a demo here: https://repl.it/@rjlevy/Vue-carousel-vueper-slides-v3

    Looking forward to hearing from you.

    Thanks, Roland

    opened by rolandjlevy 10
  • Feature request: display half of prev and next slides & accessibility improvement

    Feature request: display half of prev and next slides & accessibility improvement

    Hi, thanks for this amazing slider, it looks great and promising :)

    i'd like to ask you for one little mobile feature which improves the UX, it's to hide arrows and bullets and show the edges of next slides to tell the user there is next slides and should swipe to see them... something similar to what is described here: https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585

    Thanks

    opened by Redani 10
  • Visible - Invisible =)

    Visible - Invisible =)

    image image image

    opened by cvaize 9
  • Have the active item always be in center when showing multiples

    Have the active item always be in center when showing multiples

    This is great, thank you for your hard work.

    I wonder, is it possible to have the active slide always in center, say when showing three slides at the same time?

    I refer to this situation: https://antoniandre.github.io/vueper-slides/#ex--show-multiple-slides

    My ideal is to sort of like how OSX and Windows do slideshows of images in their respective file managers, or in some games, how you select a level.

    To try to illustrate, here is a rough diagram:

    * = no slide
    x = visible slide, but not active
    X = visible slide that is active
    

    So, say you have 3 slides. The slider loads like this, with slide one in second position:

    * X x

    Then slides advanced: x X x

    Finally if you advance to the last option, you'd see: x X *

    Does this make sense, and is this possible (without infinite slides, of course)?

    Just to give an illustration of what I essentially mean, layout wise: Screen Shot 2019-11-13 at 3 25 32 PM

    Thanks!

    opened by paperscissors 8
  • Independent speed and <video>

    Independent speed and

    Hi, first of all, thank you for the script, it's great. I was wondering if its possible to:

    1. Set independent slide duration (speed) for each slide, something like :speed="slide.speed"

    2. Use a video to fill the slide

    Thank you for your time and happy new year

    Feature request 
    opened by nam-co 7
  • Vue 3, installation - css

    Vue 3, installation - css

    In my component on develop I use as stated in guide :

    import { VueperSlides, VueperSlide } from 'vueperslides'
    import 'vueperslides/dist/vueperslides.css'
    

    Everything works but when i release with cli "npm run build" "vueperslides.css" is missing in dist files.

    Tnx for any advice :)

    vue 3 
    opened by songoo 7
  • [Feature Request] Offset slider

    [Feature Request] Offset slider

    My request is to add ability to offset slider, so you start with first slider i.e. 200px to the right, but the slider itself is full width. In Vue-Awesome-Swiper it's called Centered Slides.

    You may observe the idea here https://www.raiffeisen.ru/ (cards under the calculator)

    Feature request 
    opened by JakuninOleg 7
  • Improve swipe performance on Android

    Improve swipe performance on Android

    Hi again. food for thought: Have you considered switching to 3d transforms, or using will-change: transform on the track for improving swipe performance? CSS transitions should be pretty performant themselves, but there is something about that swipe animation, that causes lag on Android devices (chrome 53). Compared to how iOS handles the animation, its night and day. I would just like to know your view on that. Thanks.

    opened by matejmachac 7
  • Support server side rendering

    Support server side rendering

    In regards to issue https://github.com/antoniandre/vueper-slides/issues/10, the request is to support server side rendering.

    Please note that in Nuxt you can use Vueper Slides by wrapping your slideshow with the <no-ssr> tag. (refer to issue https://github.com/antoniandre/vueper-slides/issues/6)

    opened by antoniandre 7
  • Dynamic fixed-height

    Dynamic fixed-height

    I'm trying to set the fixed-height value from a dynamic variable or function like this:

    <vueper-slides
           class="no-shadow"
           :fixed-height="setSliderHeight()"
    ...
    

    But it breaks the slider, since it is trying to add eventListeners while it's not ready i assume. I get the following error: Cannot read property 'addEventListener' of undefined

    From these lines:

    // Touch enabled slideshow.
            if (this.touch.enabled) {
              this.$refs.track.addEventListener(hasTouch ? 'touchstart' : 'mousedown', this.onMouseDown);
              document.addEventListener(hasTouch ? 'touchmove' : 'mousemove', this.onMouseMove);
              document.addEventListener(hasTouch ? 'touchend' : 'mouseup', this.onMouseUp);
            }
    

    However it works when i just input a string like fixed-height="50px" directly. I use nuxt with no-ssr.

    Maybe you know a simple solution for this, thanks a lot! 🙏

    opened by FabianEllenberger 6
  • Prevent drag on first or last slide

    Prevent drag on first or last slide

    I config my slides like <vueper-slides :infinite="false" :dragging-distance="70" :disable-arrows-on-edges="true"> It's good but I think vueper-slides has option to prevent drag to right on first slide and drag to left on last slide thanks. This is my example https://codepen.io/iforcode/pen/RwVKqgZ And when I drag to right on first slide, it still dragging and you will see a large white space, how to prevent that thank.

    opened by iforcode 0
  • Adding breakpoints causes issue with slider scrolling

    Adding breakpoints causes issue with slider scrolling

    I have a news slider that shows 3 cards at a time. When I add ":breakpoints="breakpoints" to 'vueper-slides' and click the right (custom) arrow to scroll through each slide at a time, the slider goes through all my cards at once. If I click the right arrow again, it takes me all the way back to the beginning of all 25 cards. A third click starts the slider the proper way. If I remove breakpoints, the issue is gone, but I need the responsiveness.

    <vueper-slides 
         class="no-shadow"
         infinite
         arrows-outside
         :bullets="false"
         :visible-slides="3"
         :slide-multiple="false"
         :gap="3"
         :touchable="false"
         fixed-height="612px"
         :breakpoints="breakpoints">
              <template v-slot:arrow-left>
                    <svg fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
                </template>
                <template v-slot:arrow-right>
                    <svg fill="none" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
                </template>
                <vueper-slide v-for="article in articles" :key="article.id" :id="article.id">
                     <template v-slot:content>
                         <div class="vueperslide__content-wrapper">
                            <div class="news-card h-full rounded">
                                <NuxtLink :to="`/news/${article.slug}`">
                                <img class="lg:h-64 h-36 w-full object-cover object-center" :src="article.jetpack_featured_media_url" alt="news image">
                                <div class="content-wrapper">
                                      <h3 class="text-xl mb-2" v-html="article.title.rendered"></h3>
                                      <span class="leading-relaxed mb-3 text-base text-left" v-html="$options.filters.truncate(article.excerpt.rendered)"></span>
                                      <div class="flex items-center flex-wrap">
                                           <p class="md:mb-2 lg:mb-0 mt-3"> Read More
                                           <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M5 12h14"></path>
                                                <path d="M12 5l7 7-7 7"></path>
                                           </svg>
                                        </p>
                                    </div>
                                </div>
                                </NuxtLink>
                            </div>
                         </div>
                   </template>
              </vueper-slide>
    </vueper-slides>
    

    and my breakpoints look like this:

    breakpoints: {
                    1200: {
                        visibleSlides: 2,
                        fixedHeight: '450px'
                    },
                    900: {
                        fixedHeight: '650px'
                    },
                    800: {
                        visibleSlides: 1
                    }
    
    opened by cbutler90 2
  • Current page changes when array changes

    Current page changes when array changes

    When updating the array in the vueper-slide v-for, sometimes it will flip to the last slide. Specifically my issue is when visibleSlides > 1 and I swap to an array that is not evenly divisible by the visibleSlides number (ex: total slide count = 7 and visibleSlides = 3).

    I am using the component currently with placeholder "loading" slides that wait on an API call and then are replaced by the data once it is received, and having issues with jumping to pages that users are not expecting when we want to show the first page until they click or swipe.

    Codepen example: https://codepen.io/schumama/pen/LYxXzXJ. Clicking "uneven" will make it go to the end, clicking "even" just replaces the slides on the current page.

    Currently we are still on Vue 2, so if we can get a fix for that version it would be great!

    opened by schumama 1
  • lazy-load-on-drag issue

    lazy-load-on-drag issue

    hi there is an issue when lazy-load-on-drag is used, it loads same image 2 times. issue is present also on your site

    ezgif-2-13c643bd1558

    opened by musashiM82 0
  • Vite support (Webpack doesn't bundle to ESM)

    Vite support (Webpack doesn't bundle to ESM)

    Hi Antoni, Vueperslides looks excellent – I'd really like to use Vueperslides for my artwork.

    For simplicity, I'm using this method of installation, which throws 45 errors:

    Vite throws 45 errors when used with Vueperslides

    These include multiple occurrences of: resolveComponent can only be used in render() or setup(). Invalid VNode type: Symbol(Comment) (symbol) at <VueperSlides> Invalid VNode type: Symbol(Fragment) (symbol) at <VueperSlides> Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. at <VueperSlides>

    ~~Can you provide any guidance for handling the next-steps?~~ The other method for installing Vite, doesn't cause issue.

    Also, would it be worth having a SFC demo on Codepen for Vue 3?

    Feature request 
    opened by inspiredlabs 1
  • Vertical scrolling slides

    Vertical scrolling slides

    Is there a way to change the direction of slide scroll from horizontal to vertical?

    Feature request 
    opened by Shreerang 1
  • Add Zoom in / out

    Add Zoom in / out

    Please add a Zoom in and Zoom out function, for example like attachments in Gmail. Thanks

    opened by vespadj 2
  • infinite sliding support with slide-multiple

    infinite sliding support with slide-multiple

    Hey @antoniandre,

    vueper-slides is very cool, thanks for working on it!

    I tried to use slide-multiple and infinite props together, but it doesnt seem to work. In single mode everything works fine.

    Cloned your codepen and extended it: https://codepen.io/alexdohmen/pen/QWbyWeK

    Feature request 
    opened by alexdohmen 6
  • [Feature request]

    [Feature request] "auto" slides mode

    As a user, I would like to create a slider with auto number of visible items of arbitrary width. A number of items should be responsive and be defined by an overall container width that can change based on the parent container width. From what I saw from documentation this is not yet possible

    Feature request 
    opened by AndrewBogdanovTSS 4
  • Typescript support

    Typescript support

    getting errors when using it with typescript

    opened by demiro 0
🚥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
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
Modern lightweight Vue 3 carousel component

Modern lightweight Vue 3 carousel component

Abdelrahman Ismail 78 Jul 22, 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 touch ready and responsive slideshow / carousel for Vue & Vue 3.

Vueper Slides A touch ready and responsive slideshow / carousel for Vue and Vue 3. Installation npm install vueperslides Vue 3 npm install vueperslid

Antoni 376 Jul 18, 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
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
🎠 ♻️ 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