How to move nav arrows outside the container?
To place navigation arrows outside the container, please follow the below steps:
Step 1: Add the following CSS class to the module under the Advanced tab > HTML Element: nav-outside
Step 2: Now, add the below CSS to Beaver Builder’s Global CSS section or in Customizer:
.nav-outside .pp-image-carousel {
position: static;
}
.nav-outside .pp-swiper-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.nav-outside .pp-swiper-button.pp-swiper-button-next {
right: -50px;
}
.nav-outside .pp-swiper-button.pp-swiper-button-prev {
left: -50px;
}
