Carousel / Q-Tabs Amazon-gallery-like feature

codingfriend1 commented 4 years ago

Describe the solution you'd like It would be useful to have a component that works like a mix between a Multi-Image Slide Carousel and Q-Tabs https://quasar.dev/vue-components/carousel#Example--Multi-image-slides that will contain HTML content such as images, buttons, text, etc... Not just a simple button or Icon.

Check out the Amazon "Inspired by your purchases" or "Recommended items other customers often buy again " sections on the home page to see how the functionality works. Amazon.com

The arrows should show when scrolling is available like Q-Tabs,
Native scrolling on mobile.
HTML Content items of this Gallery-like Carousel should not be nested into groups but instead placed on one level.
Scrolling in the carousel should behave like the thumbnails in the Carousel or Q-Tabs instead of how Multi-Image Slide Carousel works. Should crop contents that aren't fully in view but still exposing part of the hidden content unlike how it is in Multi-Image Slides, where images that aren't part of the current slide are completely hidden.
When clicking the arrows it should scroll more than a few pixels and instead scroll at least the length of the current view.

Describe alternatives you've considered Modifying the CSS with Q-Tabs seemed to work. I needed to remove the indicator from q-tabs. Perhaps if there was an option in q-tabs to remove the indicator all together that would have been helpful. I also needed to remove the hover and focus classes on desktop so the whole tab wasn't highlighted.

<template>
  <q-tabs 
    class="gallery-tabs"
    mobile-arrows
    outside-arrows
    indicator-color="transparent"
    align="center"
  >
    <slot></slot>
  </q-tabs>
</template>

<style lang="sass">
  .gallery-tabs
    .q-tab__content
      padding: 0

    .q-tab--inactive
      opacity: 1

    .q-focusable:focus > .q-focus-helper, 
    .q-manual-focusable--focused > .q-focus-helper,
    .q-hoverable:hover > .q-focus-helper
      background: transparent !important

</style>

Additional context Image of Amazon Gallery-Slide Functionality

Thank you so much for all your help! I was hoping you would be able to reuse the functionality from Q-Tabs with slight modifications to make it work and make the work easier.