Modify carousel to always display meta info without scrolling?

  • Resolved bigbangtech

    (@bigbangtech)


    1 year, 6 months ago

    Is there a way to modify the way the jetpack carousel works just using CSS?

    Currently, when you open a carousel, you have to click the info button to display the meta info. (fine)

    On mobile, when you swipe the carousel, it advances to the next image, but scrolls to the top, and the meta info is now out of view. Can the css be modified so that the view stays at the bottom so the meta info is visible while the meta info is open?

    Visitors on mobile don’t seem to understand what’s going on.

    Furthermore, if you have scrolled to another image while the meta info is open, and when you press the info button again, it close the meta info, but nothing “appears” to happen, then you press the info button again to re-open the meta info.

    If at least the view of the carousel would stay at the bottom when the meta info is open, that would be OK – users may intuit that they need to scroll up to see the rest of the image.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Paulina H. (a11n)

    (@pehaa)

    Hey there!

    I get your point. When a user navigates from one image to another (either by swiping or using the controls) the image meta moves down out of the viewport. That’s made this way by design. Carousels are in general tricky to provide a seamless user experience. It’s even more tricky to be at once intuitive and thoroughly informative.

    Visitors on mobile don’t seem to understand what’s going on.

    Did you have a lot of users complaining about that? Or just an isolated case? Do you target a specific audience? To what extent the meta information is important to your users?

    I am asking since my intuition is that with an opposite implementation, some users might find it “annoying” to have to scroll up each time to see the whole picture. What do you think?

    Furthermore, if you have scrolled to another image while the meta info is open, and when you press the info button again, it close the meta info, but nothing “appears” to happen, then you press the info button again to re-open the meta info.

    Great catch! I was able to confirm that. It seems to be a buggy behavior. I will be happy to report it to our developers by submitting a GitHub issue in the Jetpack repository.

    Now, to answer your initial question directly:

    Is there a way to modify the way the jetpack carousel works just using CSS?

    The carousel uses JavaScript and scroll events to manage the behavior. While support for scroll events is slowly arriving in CSS, we’re still not there.

    I hope that the above helps. Please feel free to share further questions and concerns.

    Plugin Support Paulina H. (a11n)

    (@pehaa)

    Hey there again,

    I wanted to share the link to the issue I opened. You’ll find it here – https://github.com/Automattic/jetpack/issues/30773. Thank you for reporting this behavior!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Modify carousel to always display meta info without scrolling?’ is closed to new replies.