customise position of the carousel arrows

Site URL: https://shop.jonathan-gallagher.com

I have a gallery carousel, Brine, and would like to have more control over the design of the navigation arrows.

I'd like to move them, possible split them in two, one on the left, one one on the right. Change their thickness etc.

I think it's this elements:

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager

but can't seem to figure out how to make changes to it

pw:jonjonjon

Hi,

Where is arrows? I don't see it on homepage

Hi tuanphan, thanks for having a look. I have attached a screenshot.

On 11/1/2021 at 5:13 PM, JonJonJon said:

Hi tuanphan, thanks for having a look. I have attached a screenshot.

 

 

Hi,

You mean this section arrows?

@tuanphanhi, yes that's correct, the two white floating arrows that you have circled. thank you for looking into it.

On 11/4/2021 at 10:01 PM, JonJonJon said:

@tuanphanhi, yes that's correct, the two white floating arrows that you have circled. thank you for looking into it.

Add to Design > Custom CSS

body.homepage .summary-carousel-pager.sqs-gallery-controls {
    justify-content: space-between;
}

@tuanphanThank you! I appreciate you taking the time to get back to me. Do you know how to change the properties, such as thickness, & size?, I'm unsure what the css property would be. I've tried a few.

20 hours ago, JonJonJon said:

@tuanphanThank you! I appreciate you taking the time to get back to me. Do you know how to change the properties, such as thickness, & size?, I'm unsure what the css property would be. I've tried a few.

Use this code

.sqs-gallery-design-carousel .sqs-gallery-controls .next:before, .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

@tuanphanthanks very much! i learnt a little something in the process. much appreciated.

@tuanphan I think I'm missing something. Trying to replicate the justified spacing between the L&R arrows globally, but can't seem to nail it down.

URL: https://www.sbamatch.com/articles-summary

Have any thoughts? Thank you!

On 6/25/2022 at 4:55 AM, LUDLOW said:

@tuanphan I think I'm missing something. Trying to replicate the justified spacing between the L&R arrows globally, but can't seem to nail it down.

URL: https://www.sbamatch.com/articles-summary

Have any thoughts? Thank you!

You mean like this?

@tuanphan Either that, or this. Whichever is easier for mobile viewing. I think I like your version more.
 

On 6/27/2022 at 11:41 PM, LUDLOW said:

@tuanphan Either that, or this. Whichever is easier for mobile viewing. I think I like your version more.
 

Just saw this code yesterday on a site, you can try it

/* Summary Arrows in Left-Right side */
div#block-62bcbfb56700eb26823c0fdb {
span.summary-carousel-pager-next.next {
    width: 20px !important;
    height: 60px !important;
    background: url(https://static1.squarespace.com/static/5ef14c6afa3a2a0f303f97bc/t/5ef2c9833dd04e1175a3c114/1592969603938/right-arrow.png) no-repeat center center !important;
    background-size: contain !important;
    position: absolute !important;
    top: 55% !important;
    right: -20px !important;
    margin-top: -55px !important;
    text-indent: -9999px !important;
}
span.summary-carousel-pager-prev {
width: 20px !important;
        height: 60px !important;
        background: url(https://static1.squarespace.com/static/5ef14c6afa3a2a0f303f97bc/t/5ef2c91ca364a75fff313300/1592969500829/left-arrow.png) no-repeat center center !important;
        background-size: contain !important;
        position: absolute !important;
        top: 55% !important;
        left: -20px !important;
        margin-top: -55px !important;
        text-indent: -9999px !important
}}

Clever using linked images as arrows. We got this to work with section ID updates. Thank you!