# Change Summary Block Carousel arrows style

**URL:** <https://community.elfsight.com/t/change-summary-block-carousel-arrows-style/88699>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [December 13, 2024, 3:20am UTC](https://community.elfsight.com/t/change-summary-block-carousel-arrows-style/88699 "2024-12-13T03:20:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [December 13, 2024, 3:21am UTC](https://community.elfsight.com/t/change-summary-block-carousel-arrows-style/88699/1 "2024-12-13T03:21:00Z")

</div>

If you want to change this arrow style in Summary Block Carousel.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/2/b29c5b49620c166257869b5e9c17c9216ebd9d3d.jpeg)

to this style.  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/9/e9e75a1c2a82831c6286aa76299be22bc789885f.png)

You can use this code to Custom CSS box

```auto
.summary-carousel-pager.sqs-gallery-controls>span {
    padding: 10px !important;
    border-radius: 50%;
    position: absolute !important;
    top: 50% !important;
    display: block !important;
    opacity: 1 !important;
}
span.summary-carousel-pager-prev.previous {
    left: 0 !important;
}
span.summary-carousel-pager-prev.previous.sqs-disabled {
    visibility: hidden;
}
span.summary-carousel-pager-next.next {
    right: 0 !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before, .sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-size: 16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
}
.summary-carousel-pager.sqs-gallery-controls>span {
    background-color: white !important;
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: unset !important;
    margin: unset !important;
}
.sqs-gallery-controls .next:before, .sqs-gallery-controls .previous:before {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/1/810014568bb789d52094abf46329545c7445f477.jpeg)

If you have any problems, you can comment, send me an message or email me.