How to build a slideshow (QCarousel) with parts of the next and previous image showing?



  • I’m building a Quasar SPA that explains why and how to switch to GNU/Linux. (For example from Windows 7 whose support ended on January 14th.)

    At the top of the page it features a slideshow (QCarousel) that shows screenshots of (KDE/)GNU/Linux - I would like change it so that the screenshot is always fully visible. I think the best way to achieve this would be to somehow replace the whitespaces left and right of the image with parts of the next and previous images when the window has very wide dimensions. Here is the SPA with those whitespaces.

    Maybe somebody here has any help on how to achieve that?
    Has this been implemented somewhere already? Would it be an additional feature for the QCarousel component?


    There’s also many other things I’m interested in such as how the cards could be made to flip in a way that looks good instead of sliding when swiping them or why Quasar adds all these paddings many of which I had to override or how to prevent the white flickering when QCarousel switches the image. But these aren’t as problematic as that slideshow-issue as of right now and I’ll add them to the issues where you could comment too.
    It’s still under development.



  • Basically like https://gs-shop.github.io/vue-slick-carousel/#/example/center-mode with "slidesToShow": 1

    Most relevant issue seems to be: https://github.com/quasarframework/quasar/issues/6135

    I have changed it now so that if there’s a large whitespace the previous and next buttons cover the whitespace-area.