Post Carousel Arrow Navigation

—

### 1. **Edit the WPBakery Post Carousel**
– Open the page where your **Post Carousel** is added in WPBakery.
– Click to **Edit** the carousel element.
– Check for navigation settings. If the element supports navigation placement, choose an option that places arrows externally. If not, proceed with custom CSS.

—

### 2. **Enable Custom Classes**
– Under the **Post Carousel** settings, add a custom class in the **Extra class name** field, e.g., `custom-carousel-arrows`.

—

### 3. **Add Custom CSS**
Use CSS to position the navigation arrows above the carousel.

1. Go to **WP Admin > Appearance > Customize > Additional CSS** (or use your theme's custom CSS area).
2. Add the following CSS:

.custom-carousel-arrows {
    position: relative;
    padding-top: 40px; /* Adjust as needed to make space for arrows */
}

.custom-carousel-arrows .slick-arrow {
    position: absolute;
    top: -30px; /* Position above the carousel */
    z-index: 10;
}

.custom-carousel-arrows .slick-prev {
    left: 10px; /* Adjust for left arrow */
}

.custom-carousel-arrows .slick-next {
    right: 10px; /* Adjust for right arrow */
}

> **Note**: Replace `.slick-arrow`, `.slick-prev`, and `.slick-next` with the actual classes used by the carousel if different. You can inspect the element using your browser's developer tools to confirm the classes.

—

### 4. **Adjust Navigation Markup (Optional)**
If the arrows are not rendering outside the carousel, you may need to modify the HTML output.

1. Look for hooks in WPBakery or a child theme to customize the layout.
2. Use a WordPress action or filter to modify the markup of the carousel if needed.

—

### 5. **Add JavaScript (If Needed)**
If your theme or carousel plugin does not render arrows externally, you might need JavaScript to move them outside the carousel dynamically.

Add the following script in your theme or using a plugin like **WPCode**:

jQuery(document).ready(function ($) {
    var $carousel = $('.custom-carousel-arrows .slick-slider');
    if ($carousel.length) {
        var $prevArrow = $carousel.find('.slick-prev').detach();
        var $nextArrow = $carousel.find('.slick-next').detach();
        $('.custom-carousel-arrows').prepend($prevArrow).prepend($nextArrow);
    }
});

—

### 6. **Save and Test**
– Save your changes.
– Refresh the page and test the carousel navigation to ensure the arrows appear at the top.

—

If your carousel uses a different slider library (e.g., Swiper.js or OwlCarousel), the CSS and JS selectors may need to be adjusted accordingly.

DC/DC Wechselrichter IsolationsfehlerDC/DC Wechselrichter fachgerecht isolieren
Wechselrichter-Lösung: Anhand eines Praxisbeispiels zeigen wir Ihnen, wie verblüffend einfach eine Lösung manchmal sein kann.

Elektrische Kontakte isolieren…

Der Dämpfungsring – by Hagemann SystemsVon der ersten Idee bis zum Serienbauteil: Als Produzent und Entwickler können wir viel mehr als nur Standard.
Anhand eines Praxisbeispiels zeigen wir Ihnen, wie einfach eine Lösung manchmal sein kann.…

Die Lugsulation© flex wird bunt
Die Lugsulation©…

Abdeckkappen für jeden EinsatzAbdeckkappen für jeden Einsatz
Die Branche der elektrischen Energietechnik wächst aufgrund der Energiewende, E-Mobilisierung und Globalisierung stetig weiter. Parallel hierzu werden auch…

Lugsulation Seal im Einsatz – Transportsysteme
Keine Lust mehr auf Wartungsarbeiten und ungeschützte elektrische Kontakte?
Wir haben die Lösung.

Im heutigen Anwendungsbeispiel zeigen wir den Einsatz der Lugsulation im Bereich der autonomen…

Cost-efficientReduced maintenance & follow up costs due to damaged contacts are prevented.

KosteneffizientReduzierter Wartungsaufwand und Folgeschäden durch kaputte Kontakte werden vermieden.

EigenmontageDie Lugsulation kann einfach und schnell vor Ort montiert werden.

BrandschutzDie Lugsulation ist auch mit brandsicherem Material nach UL94 (V0) erhältlich.

move left and right navigation above to slider

### Updated Code
1. **HTML Structure Update:**
Place the navigation buttons (`owl-prev` and `owl-next`) above the slider in the DOM structure. If you can't modify the HTML, use `position: absolute;` in CSS to move them above.

Assuming the structure stays the same, CSS adjustments can achieve the result.

2. **CSS Styling:**
Use CSS to reposition the arrows. Add the following CSS to your stylesheet:

.owl-carousel-wrapper {
       position: relative;
   }

   .owl-prev,
   .owl-next {
       position: absolute;
       top: -50px; /* Adjust this value to control the distance above the slider */
       z-index: 10;
   }

   .owl-prev {
       left: 10%; /* Adjust for the desired position */
   }

   .owl-next {
       right: 10%; /* Adjust for the desired position */
   }

   /* Optional: Style the buttons */
   .owl-prev .owl-nav-container,
   .owl-next .owl-nav-container {
       background: #fff; /* Change the background color */
       border-radius: 50%; /* Make it circular */
       padding: 10px; /* Adjust size */
       box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
   }

   .owl-prev:hover .owl-nav-container,
   .owl-next:hover .owl-nav-container {
       background: #ddd; /* Change background on hover */
   }

3. **Preview the Changes:**
– Save the CSS.
– Refresh your webpage to ensure the navigation arrows are now displayed above the carousel.

4. **JavaScript Adjustment (if required):**
If the carousel dynamically injects the navigation arrows, ensure that the script applies the correct `top` positioning after the carousel is initialized:

$(document).ready(function () {
       $(".owl-carousel").on("initialized.owl.carousel", function () {
           $(".owl-prev, .owl-next").css("top", "-50px"); // Sync with your CSS value
       });
   });

This approach ensures the navigation arrows are visually positioned above the slider without requiring a significant overhaul of the HTML structure. Adjust the CSS values to fit your design requirements.