Skip to content

Documentation

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

PowerPack

  1. Home
  2. Docs
  3. PowerPack
  4. Modules
  5. Image Carousel
  6. How to move nav arrows outside the container?

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;
}
Image Carousel - PowerPack Beaver Builder
Arrows outside the container
Was this article helpful to you? Yes 2 No 1
×