How to turn off Autoplay and add Navigation arrows to Cover-page (Squarespace 7.0)

Site URL: http://www.studiojci.com/

Hello!

I am currently creating a Cover-Page for our website and I was wondering if it was possible to stop the auto-scroll feature for the images and add big arrows to the middle left and right sides where people can navigate through the images instead. For reference I am using a Squarespace 7.0 Avenue Family template so I cannot do a blank page and full bleed gallery block which I assumed would have been my alternative. I am also using the TRADE layout as my cover page. 

Thank you for any and all help you may be able to provide! 

You can't use standard page, add gallery block, then we will give the code to make gallery fullbleed, remove header, footer to make it cover page??

6 hours ago, tuanphan said:

You can't use standard page, add gallery block, then we will give the code to make gallery fullbleed, remove header, footer to make it cover page??

Hi Tuanphan! 

Thanks for reaching out. If it is possible to make a gallery block full bleed into a cover page on 7.0 that'd be a huge help! See below what I have so far. A couple things I wanted to make sure though,

• Is it possible to keep the header (logo and navigation) 
• When I make the images full bleed is it possible to have the gallery only display one image at a time as the carousel option seems to not have an option to display one at a time (see below) 

Thanks so much!

On 7/27/2021 at 11:44 PM, jcistaff said:

Hi Tuanphan! 

Thanks for reaching out. If it is possible to make a gallery block full bleed into a cover page on 7.0 that'd be a huge help! See below what I have so far. A couple things I wanted to make sure though,

• Is it possible to keep the header (logo and navigation) 
• When I make the images full bleed is it possible to have the gallery only display one image at a time as the carousel option seems to not have an option to display one at a time (see below) 

 

Thanks so much!

Not sure. You can add, then share url. We will try checking

12 hours ago, tuanphan said:

Not sure. You can add, then share url. We will try checking

Thanks Tuanphan here's the url: http://www.studiojci.com/gc1

To get access into the page the password is: jci123

Please let me know if there is anything else I can do!

20 hours ago, jcistaff said:

Thanks Tuanphan here's the url: http://www.studiojci.com/gc1

To get access into the page the password is: jci123

 

Please let me know if there is anything else I can do!

Add to Design > Custom CSS

/* GC1 gallery */
body#collection-60fed61a880cf11c69d69adf {
div#canvas {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
header#header {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}}

On 7/30/2021 at 5:25 AM, tuanphan said:

Add to Design > Custom CSS

/* GC1 gallery */
body#collection-60fed61a880cf11c69d69adf {
div#canvas {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
header#header {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}}

 

Thank you Tuanphan! 

This definitely helped increase the image size just a couple more things:

• Is it possible to have no white borders at the top, so the navigation menu is transparent within the image
• Is it possible to get rid of the white borders at the bottom?

19 hours ago, jcistaff said:

Thank you Tuanphan! 

This definitely helped increase the image size just a couple more things:

• Is it possible to have no white borders at the top, so the navigation menu is transparent within the image
• Is it possible to get rid of the white borders at the bottom?

 

 

 

Don't remove any code. Add this to Page Header

<style>
div#canvas {
    margin-top: 0;
    padding-top: 0;
}
header#header {
    margin-bottom: 0;
    background: transparent;
    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
div#block-yui_3_17_2_1_1627313726669_7456 {
    margin-top: 0;
}
</style>

10 hours ago, tuanphan said:

Don't remove any code. Add this to Page Header

<style>
div#canvas {
    margin-top: 0;
    padding-top: 0;
}
header#header {
    margin-bottom: 0;
    background: transparent;
    position: absolute;
    z-index: 9999;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
div#block-yui_3_17_2_1_1627313726669_7456 {
    margin-top: 0;
}
</style>

 

This helped scale the image fully thanks! Though now a couple things I noticed

• This made the margins inconsistent between other pages - is there a way to lower the logo and menu bar for the cover page so that it matches the height of the other pages? If I increase the margin size that's why it'll add more white space to the top
• there is still a small white area at the bottom and right hand side - is there a way to remove the white area completely?

 As always thank you for your help!