Vuetify: [Feature Request] Carousel - multiple items per slide

Created on 25 Sep 2017  路  9Comments  路  Source: vuetifyjs/vuetify

Versions


Vue 2.4.2 - Vuetify 0.15.2

What is expected ?

  • ability to add multiple items per slide
  • ability to slide multiple items

What is actually happening ?


Currently the carousel is very basic and really only allows you to change the icons inside of it.

Reproduction Link


Current Carousel
https://vuetifyjs.com/components/carousels

Link to another framework carousel
http://element.eleme.io/#/en-US/component/carousel

What will it allow you to do that you can't do today?

control how many items the previous/next actions do

### How will it make current work-arounds straightforward?
Well there are no examples of doing any of this on the main site so I'm not even sure there are work arounds for this.

What potential bugs and edge cases does it help to avoid?

gesture and event based bugs for sure and css related bugs trying to hide certain elements to the existing carousel

I'm not really sure what other information you may need so please let me know if there is anything you'd like more input on. I originally removed the bottom part of the boilerplate for the ticket because the directions for feature requests were a little hazy.

VCarousel feature needs more information

All 9 comments

Breakout from #1617

I'm revisiting this now with #6924 . Could you elaborate a bit more what features specifically?

Can I suggest these as options?
mulitple

It's been a while since I've wrote this up but the premise was to be able to provide a template for a "slide" whether that meant a single item or a container of items. Amazon and many other e-commerce sites have components like this for tabbing through items. Some operate by arrows, others by scrolling... There's plenty of creative ways of handling styles here but the core desire is to be able to capture the functionality of a carousel and apply it to groups of items at the same time rather than just a single item.

Other UI frameworks typically allow you to pass the component the collection of items, how many items to display per slide, and how many items to move when moving forward or backwards. That way you can have 5 items shown but move 1 item or 5 if you want to.

Can I suggest perhaps creating a new component in Vuetify called "scroller" or "swiper" that implements the same kind of logic as https://idangero.us/swiper/ or https://pawelgrzybek.github.io/siema/

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

For anyone looking to implement this kind of slider, it shouldn't be too complicated to build your own.
Here's an example (not by me) that does the basics: https://codepen.io/wa23/pen/pObyrq

Was this page helpful?
0 / 5 - 0 ratings

Related issues

smousa picture smousa  路  3Comments

aaronjpitts picture aaronjpitts  路  3Comments

dohomi picture dohomi  路  3Comments

Antway picture Antway  路  3Comments

cawa-93 picture cawa-93  路  3Comments