Summary Block - Carousel Navigation Arrows

Site URL: https://www.redheadgallery.org/members-highlight-campaign

Hello,

I would like to enlarge the navigation arrows on the top right corner of my summary block and rearrange them to be at the edges. Can anyone assists me with this customization?

Here is the url to the page with the summary block in carousel mode: https://www.redheadgallery.org/members-highlight-campaign

On 5/20/2021 at 10:24 AM, RedHeadGallery said:

Site URL: https://www.redheadgallery.org/members-highlight-campaign

Hello,

I would like to enlarge the navigation arrows on the top right corner of my summary block and rearrange them to be at the edges. Can anyone assists me with this customization?

Here is the url to the page with the summary block in carousel mode: https://www.redheadgallery.org/members-highlight-campaign

Add to Design > Custom CSS

/* Summary arrows size */
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-size: 30px;
    height: 30px;
    width: 30px;
    line-height: 30px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-size: 30px;
    height: 30px;
    width: 30px;
    line-height: 30px;
}
.sqs-gallery-controls .next, .sqs-gallery-controls .previous {
    width: 30px !important;
    height: 30px !important;
    font-size: 30px !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    margin-right: -5px;
}

Thank you, that worked great!

Is it possible to take it a step further by adding text and placing the navigation arrows on either side of the summary block?I mocked up an example of what I would like to achieve.

On 5/22/2021 at 11:07 AM, RedHeadGallery said:

Thank you, that worked great!

Is it possible to take it a step further by adding text and placing the navigation arrows on either side of the summary block?I mocked up an example of what I would like to achieve.

 

Add to Design > Custom CSS

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: 100%;
    justify-content: space-between;
    float: none !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:after {
    content: "Prev";
    position: relative;
    top: 2px;
}
span.summary-carousel-pager-next.next:after {
    content: "Next";
    float: left;
}

Hello again,

I tried to modify it to match my mock up but I don't think I got it down. Could you assist with the positioning? The red "code" at the bottom was the little success I got when tampering with it.

Website: https://www.redheadgallery.org/

/* Summary arrows size */
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    font-size: 30px;
    height: 30px;
    width: 30px;
    line-height: 30px;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    font-size: 30px;
    height: 30px;
    width: 30px;
    line-height: 30px;
}
.sqs-gallery-controls .next, .sqs-gallery-controls .previous {
    width: 30px !important;
    height: 30px !important;
    font-size: 30px !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous {
    margin-right: -5px;
}
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
    width: 100%;
    justify-content: space-between;
    float: none !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:after {
    content: "Prev";
    position: relative;
    top: -25px;
    font-size: 20px !important;
}
span.summary-carousel-pager-next.next:after {
    content: "Next";
    float: Left;
    font-size: 20px !important;
}

Add this under above code

.sqs-gallery-controls .next, .sqs-gallery-controls .previous {
    width: 60px !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:before {
    width: 30px !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .previous:after {
    float: right !important;
}
.sqs-gallery-design-carousel .sqs-gallery-controls .next:before {
    float: right !important;
}
span.summary-carousel-pager-next.next:after {
    position: relative;
    top: -25px;
}