Jump to content

target even/odd captions on fullscreen slideshow

Recommended Posts

Site URL: https://wisteria-panda-z2eg.squarespace.com/

pw: rotorrotor

Hi All,

On the landing page of my website is a fullscreen slideshow. I would like to have the .gallery-caption pop up on the right for odd images and on the left for even images.

Currently I align them to the right using:

.gallery-caption {
  margin-right: 0em;}

1736361998_Screenshot2020-07-25at15_30_38.thumb.png.a0ab59665f1059d7e24fbb15d56e4763.png

For odd images I simply want to define:

.gallery-caption {
  margin-left: 0em;}

My problem is that when I use .gallery-caption:n-child it turns out that child(2) refers to the caption of EVERY image, while child(1) refers to the fading between images.

Does anyone know how to do this right?

Thank You + Best,

Gregor

Link to comment

Hi there, you should select odd and even of caption parent

.gallery-fullscreen-slideshow-item:nth-child(even) .gallery-caption {
      margin-left: 0 !important;
    margin-right: auto !important;
}

image.thumb.png.9af302ea75647182b737d893e2d9f6b7.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi There!

Thank You!!

Yes, that does move it to the left. However it does it for every image. And whenever it fades to the next image it quickly jumps to the right and then back to the left. This leads me to believe, that somehow even parents refer to static images and odd parents refer to transitions.

What do you think?

Thank you again!

Best, Gregor

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.