Jump to content

Headlines Banner Slideshow Bullet Navigation Instead Of Arrows

Recommended Posts

Posted

Site URL: https://cloudaviationcorona.squarespace.com/

Hello,

Total noob here needing some assistance!

Is there a way to change the navigation option on "Headlines" Banner Slideshow to Bullets instead of Arrows?

Current navigation is like this with arrows on each side:

image.thumb.png.0e5cf21384e376de2f3eeee77f414820.png

And the goal is to remove the arrows and replace with Bullets like below, similarly like what "Gallery" Slideshow: Full option has.

image.thumb.png.c1600aad526287c19d856e222886237d.png

 

I've considered just using the Gallery but it does not have the option to have a Button within the image itself like the Headlines do. I am fine with using either, as long as in the end, it ends up with Bullet navigation with Title, Caption and Button within the image.

Thank you in advance!

 

Posted (edited)

@tuanphan How did you get the Gallery to have the Button + Title in the over the image?? I am fine with using the gallery since it has the Bullets but I could never figure out how to insert a button for each slide image.png.2af8c331987d8618fc14e26ad897daeb.png

Edited by pinkchoux
additional ask
Posted
On 4/30/2022 at 7:02 AM, pinkchoux said:

@tuanphan How did you get the Gallery to have the Button + Title in the over the image?? I am fine with using the gallery since it has the Bullets but I could never figure out how to insert a button for each slide image.png.2af8c331987d8618fc14e26ad897daeb.png

First, add this to Design > Custom CSS

/* Gallery slideshow */
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 50%;
    margin: 0 !important;
    left: 50%;
    transform: Translate(-50%,-50%) !important;
}
.gallery-caption-wrapper {overflow: visible;}
a.tp-button {
    background-color: black;
    color: white;
    padding: 10px 20px;
}
a.tp-button:hover {
    background-color: white;
    color: black;
}

Next, edit caption, use this format

<h3>Title 01</h3>
<a href="/contact" class="tp-button">CLick here</a>

caption.thumb.png.e4503542f990500e84add872e32fdcfd.png

and result

result.png.da75fe8bc4bec9398190909833174782.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!)

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.