Carousel: Handle print media

[jurajkapsz]

Is your feature request related to a problem? Please describe.

I've applied Carousel to selected page content, but now the page's print version does not include slided content, which I would like to include in the print version. Maybe, the Carousel presentation has not so much utility for a print version.

I'm importing carousel styles via Vite eg with import "@fancyapps/ui/dist/carousel/carousel.css";.

For now, to solve printed version, I've included Carousel styles under a @media screen CSS block and made a few additional CSS overrides under @media print eg disabling CSS transform for .f-carousel__slide.

Describe the solution you'd like

Maybe Carousel could be disabled by design for a printed version, ie written under @media screen?

Describe alternatives you've considered

Maybe breakpoints could recognize a print option to have some flexibility for having carousel-like presentation in printed version or not.

Though presenting a print of page with a carousel feature could be rather a matter of printing out a screenshot rather than having a working CSS print style.

Additional context

Using Carousel version v6.0.26.

[fancyapps]

Hi,

I think people usually want to print what they see on the screen, and it would be strange if additional content appeared when printing that wasn't visible at all.

It will not be possible to use breakpoints because the script on the window resize event looks at all media queries and creates a new options object from those that match. I suspect that watching media query wouldn't work anyway if the user pressed the print button in the browser.

In your case, the simplest solution would be to duplicate the content, initialize the Carousel in one of them and hide it using @media print, and vice versa with the other - show only using @media print. But if you don't want to duplicate content, then you can safely use your existing solution.

[jurajkapsz]

Hi,

thanks for reviewing this issue. I would like to add additional context:

I think people usually want to print what they see on the screen, and it would be strange if additional content appeared when printing that wasn't visible at all.

Maybe it depends on the context or use case. If it would be eg promo banners or similar, that's sounds reasonable. I haven't used a carousel based presentation in a while, so maybe I got the usage wrong, but in my case of using one is where I don't think I hide or want to hide any content.

In brief, I had presented regular content ie a set of articles (product cards) in a grid and changed it to a carousel for more concise presentation. With or without the carousel, I would want to print all the included product cards on page, as they reflect the available options and at the same time they are all relevant informations, so the user should have them all in print, as they are not being filtered etc. I have a live example, its not in english though, https://www.zateplit.sk/sk/fukana-izolacia/ :

The page print can be previewed as usual, but I am attaching a PDF printout for reference as well: printed version

I believe I have it correct, so I am thinking there are cases for printing all slides besides the current carousel page.

I looked at other similar utilities like eg accordions, and they basically always influence screen and print styles the same way as Carousel does, so it's by the looks up to the developer to overwrite the styles for print if needed. But I am not sure if it can be done in CSS similarly easily with Carousel.

It will not be possible to use breakpoints because the script on the window resize event looks at all media queries and creates a new options object from those that match. I suspect that watching media query wouldn't work anyway if the user pressed the print button in the browser.

Yes, this might not be a fit, but I liked the ability to disable Carousel based on queries.

In your case, the simplest solution would be to duplicate the content, initialize the Carousel in one of them and hide it using @media print, and vice versa with the other - show only using @media print. But if you don't want to duplicate content, then you can safely use your existing solution.

Yes, to isolate carousel styles to only screen media works well. The only drawback is I can't do solely npm updates to update fancybox integration as before. I would not want to use duplicate content, it feels tweaky tbh and with more overhead for page.