Adapting carousel component as Netflix-style infinite carousel
-
Hello there,
I would like to create a Netflix-style carousel (also called ‘content band’) which spans wide, so that the carousel items are not visually ‘stacked’ (as is the case with the Quasar carousel), but rather horizontally aligned and infinitely scrollable.
Here is a screenshot:
I was wondering if anybody has an idea if this could be achieved with the existing carousel component at all? Would be a fantastic extra feature if you ask me.
Cheers
-
I was also looking for a way to configure the carousel in another way possibly that way and also centered with a portion of the previous & next slides showing. For now I have gone with this: https://github.com/surmon-china/vue-awesome-swiper, though I think the overall file size(123kb) on it is higher than I prefer for the little portion of its features I am looking at using.
I notice the carousel slides are at 100% flex basis and modifying that changes their width, but I have not looked past that as of yet.
-
Thank you very much @smakinson ! This looks exactly like what I would need… I agree that the size is quite big, but I’d only use on my main page, so I will try it out. Right now I’ve used this carousel: https://ssense.github.io/vue-carousel/ It doesn’t have a lot of config features though and is very limited when it comes to customizing things.
-
A simple y-overflowed div containing a non-wrappable row along with a v-touch-pan usage would do that.
-
Thank you @rstoenescu, I haven’t yet noticed the touch pan directives. I was looking for quick solution for an infinite scroll carousel, but good to know that there is a convenient way of building it oneself.
