Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

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;
}