Change Summary Block Carousel arrows style

Pro Tips Other Tips
1

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

image
image600×302 23.6 KB

to this style.
image

You can use this code to Custom CSS box

.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
image525×981 67.8 KB

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