[Solved] QCarousel full screen in v0.15.6



  • Hi, I just migrated from 0.14.9 to V0.15.6 today and found many breaking change to solve.
    One that I cannot find a simple solution is how QCarousel toggle full screen is now behave.
    In version 0.14.9, just put fullscreen option to q-carousel and there’ll be a button on bottom right corner of carousel. In 0.15.6, there’s a lot of code just to put full-screen botton there.
    The end result has strange looking carousel in both small and full-screen.
    Here’s fiddle that I created to illustrate the issue I ran into.
    https://jsfiddle.net/ojkL3xkc/15/
    In short, using src-img make image overflow the carousel.
    It constraint only height of picture, so in full screen, left and right side of picture got chop off.

    I tried with different config. Here’s another fiddle.
    https://jsfiddle.net/ojkL3xkc/20/
    I use html <img> tag instead of using src-img.
    It look a bit better than getting a chop off image but the background is very distracting as it doesn’t dim background like in 0.14

    Can anybody suggest me how to simulate q-gallery-carousel behavior with 0.15 ?



  • To whom who face similar issue like me…
    Here’s how I simulate previous QGalleryCarousel.

    https://jsfiddle.net/ojkL3xkc/39/

    Disclaimer: I don’t know if it should be done like this. I just want customer to work with my app as it was.


  • Admin

    Better use img-src prop on QCarouselSlide. Forked previous jsfiddle: https://jsfiddle.net/h4yc1j37/6/



  • @rstoenescu
    But it will truncate image.
    I need image to be scaled to fit viewer and maintain it aspect ratio.