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
  • Replies 2
  • Created
  • Last Reply

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.