Adding a text overlay on gallery slideshow (full bleed autoplay on homepage)

Hey!

I want to add a text overlay (different pieces of text for each image) to a full bleed gallery slideshow (autoplay with no arrows) — I've been searching this forum all day but haven't found a definitive answer yet.

I tried the slideshow with the text and the arrows and added a code injection on the header to autoplay the gallery. However, the client did not like that the image "slid" to the next once VS. how it is now (cutting to the next image without any sliding).

I'm hoping there's a simple solution to this, as it seems many people have been asking for this for years! 
 

Thanks a bunch 🙂

For reference, here is the URL: https://anabezi.squarespace.com/
Password: ana123

Enable Options: Captions

then edit each image

text will appear under slideshow

share link to page where you use slideshow, we can give code to move it over image

Or You can consider using List Section Banner Slideshow. It has all options

Hi @tuanphan, 

I've added the captions now, is there a way to make them larger, move them up and to the left of the page and then remove the black bar at the bottom? Thank you!

It's for the gallery at the opening (with the overlay of the navigation and logo).

Here is the URL: https://anabezi.squarespace.com/home 
password: ana123

Thank you so much @tuanphan! This worked perfectly. 

What CSS would need to be added to change the text size for mobile only? 

On 12/22/2022 at 11:23 PM, taylahroberts1 said:

Thank you so much @tuanphan! This worked perfectly. 

What CSS would need to be added to change the text size for mobile only? 

Adjust code to this

body#collection-639bcaa9e249ef08743e64b2 {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 50%;
    left: 0;
    text-align: left;
    max-width: 90%;
}
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 30px;
}
.gallery-fullscreen-slideshow {
    margin-bottom: 0px !important;
}
/* mobile size */
@media screen and (max-width:767px) {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 20px;
}}}