Slideshow Arrows to Summary Arrows

Description

• change slideshow arrows (list banner slideshow, list carousel, reel slideshow) to summary carousel arrow style
• view demo – password: abc
• buy me a coffee

(list banner slideshow)

(list carousel)

(slideshow Reel)

#1. Install Code

#1.1. You can use this code to Custom CSS

/* List Slideshow Arrow to Summary Carousel Arrow */
.user-items-list-banner-slideshow__arrow-icon-foreground.user-items-list-banner-slideshow__arrow-icon-path:last-child {
    display: none;
}
.user-items-list-banner-slideshow__arrow-button--left .user-items-list-banner-slideshow__arrow-icon {
    transform: translateX(30%);
}
.user-items-list-banner-slideshow__arrow-button--right .user-items-list-banner-slideshow__arrow-icon {
    transform: translateX(-30%);
}

/* List Carousel Arrow to Summary Carousel Arrow */
path.user-items-list-carousel__arrow-icon-foreground.user-items-list-carousel__arrow-icon-path:last-child {
    display: none;
}
.user-items-list-carousel__arrow-button--left svg.user-items-list-carousel__arrow-icon {
    transform: translateX(30%);
}
.user-items-list-carousel__arrow-button--right svg.user-items-list-carousel__arrow-icon {
    transform: translateX(-30%);
}

/* Reel Slideshow to Summary Carousel Arrow */
.gallery-reel-control-btn-icon path:last-child {
    display: none;
}
[data-previous] svg {
    transform: translateX(30%);
}
[data-next] svg {
    transform: translateX(-30%);
}