Possible to move nav-arrows outside swiper-container?

[Nicke-N]

Hey!

I'd like to thank you all for the wonderful component that you've made!

I want to make sure the navigation arrows and slider won't make any contact. The way I thought this should be done is by moving the nav-arrows outside the container, but then the arrows won't work.

My question is as the title, is it possible to move the navigation arrows to outside the container,or is it better to approach this issue in some other way?

[vltansky]

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
    </div>
    <button type="button" class="swiper-navigation-prev">Prev</button>
    <button type="button" class="swiper-navigation-next">Next</button>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".swiper-container", {
        navigation: {
          nextEl: ".swiper-navigation-next",
          prevEl: ".swiper-navigation-prev"
        }
      });
    </script>

https://stackblitz.com/edit/aew8bn?file=index.html

[Nicke-N]

Thanks for the quick reply!
Does this also work on the react version? Sorry for forgetting to mention it before.

[vltansky]

https://codesandbox.io/s/swiper-react-fork-forked-wgv3m?file=/src/App.js

import React from "react";
import "./styles.css";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, A11y } from "swiper";

// Import Swiper styles
import "swiper/swiper.scss";
// import "swiper/components/navigation/navigation.scss";
SwiperCore.use([Navigation, A11y]);

export default function App() {
  return (
    <>
      <Swiper
        navigation={{
          nextEl: ".swiper-navigation-next",
          prevEl: ".swiper-navigation-prev"
        }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
      <button type="button" className="swiper-navigation-prev">
        Prev
      </button>
      <button type="button" className="swiper-navigation-next">
        Next
      </button>
    </>
  );
}

[Nicke-N]

This works well for me! Thank you very much for the help and your time!