CODEWITHSUNDEEP
reactjsswiper.jsreact-swiper
Alireza Bagheri
Alireza Bagheri

Reputation: 606

swiper-button outside container in react

how can I make swiper nav outside the container in react js?

enter image description here

to

enter image description here

Upvotes: 4

Views: 8103

Answers (1)

Alireza Bagheri
Alireza Bagheri

Reputation: 606

you can use this

method 1

//add custom btns in some inner comp
 <i className="icon-arrow-long-right review-swiper-button-next"></i>
 <i className="icon-arrow-long-left review-swiper-button-prev"></i>

and next in swiper comp

<Swiper
    navigation={{
      nextEl: '.review-swiper-button-next',
      prevEl: '.review-swiper-button-prev',
    }}
 >
  </Swiper>

or you use this way

method 2

// some-inner-component.jsx
import { React } from 'react';
import { useSwiper } from 'swiper/react';

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

more in info : https://swiperjs.com/react#use-swiper

enjoy ;)

Upvotes: 5

Related Questions