Jump to content

Gallery Slideshow Reel Custom Arrows

Go to solution Solved by kalevi,

Recommended Posts

Hi there,

Hoping someone can help me with this...

I am trying to change the arrows on my gallery slideshow: Reel look like the ones on this site: https://www.photosbyjorge.com/ (desktop version)

I'm also wanting the slideshow Reel to  automatically cycle through the images every 4 seconds if possible.

Any help would be much appreciated. 🙏

Regards,

Dan

Link to comment

Hi Dan,

When looking at the shape of the gallery arrows on Jorge's website, and if I'm not mistaken, it seems to me that instead of the "Slideshow Reel" gallery section, there is a page section in use with a "Carousel" gallery block attached. There can be added an automatic transition between slides.

Link to comment

Hi Kalevi,

Thanks for getting back to me. Yes you are right! That's exactly what I'm after. 

Sorry, I'm new at Square Space... how do you create that Carousel? I have created one but i cant see the options that are in your video... and the arrows aren't the same. 

Thanks again for the help.

Cheers,

Dan 

Screenshot 2024-04-07 at 7.26.32 pm.png

Link to comment
7 minutes ago, DanDan87 said:

Thank you Kalevi!

I think the problem is, I'm using 7.1. I don't think I can make it look like this in 7.1. 

Correct me if I'm wrong.

Cheers, Dan

Hi Dan,

This can be done in version 7.1, maybe you are in version 7.0 instead?

Link to comment
Just now, DanDan87 said:

Weird, i think i have to pay f or this feature by becoming a Circle member.

Oh, it turns out that only Circle members can add gallery blocks to all content areas in 7.1. Once they add the block, anyone with permission to edit site content can edit the block. You can make me the admin of your website for a while and I'll see if I can add this block to your website.

Link to comment
  • 2 months later...
On 6/23/2024 at 5:45 PM, sheridanckai said:

I'm trying to figure out how to change the gallery reel arrows to a solid triangle , does anyone know how to do this?

thank you

iconmonstr-caret-right-filled-240.png

You can use this code to Custom CSS box

button.gallery-reel-control-btn svg {
    display: none !important;
}
button.gallery-reel-control-btn {
        background-size: contain;
        background-repeat:no-repeat;
        background-position: center center;
        opacity: 1 !important;
        padding: 30px !important;
}
.gallery-reel-control-btn::before {
    background-color: transparent !important;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_06/iconmonstr-caret-right-filled-240.png.8651401bdea275af339bab793f6c309b.png);
}
button.gallery-reel-control-btn[aria-label="Next Slide"] {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_06/iconmonstr-caret-right-filled-240.png.8651401bdea275af339bab793f6c309b.png);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.