Jump to content

customise position of the carousel arrows

Recommended Posts

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

Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

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
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;
}

 

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
  • 7 months later...
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!

Screen Shot 2022-06-24 at 4.54.38 PM.png

You mean like this?

arrows.thumb.png.124a696691fa5f97cd0ff419b7dd6dc6.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
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.
 

Screen Shot 2022-06-27 at 11.39.03 AM.png

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
}}

 

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.