I've been struggling with this issue for a while now. I need to move the pagination outside of the slider, but using padding or margin doesn't seem to work. It always remains inside the slider, and if I try to position it outside, it gets hidden.
import React from "react"
import SwiperCore, {
Navigation,
Pagination,
Scrollbar,
A11y,
Keyboard,
Mousewheel,
EffectCoverflow,
} from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";
import "./Simple.css";
// install Swiper components
SwiperCore.use([
Navigation,
Pagination,
Scrollbar,
A11y,
Keyboard,
Mousewheel,
EffectCoverflow,
]);
const SimpleSwiper = () => {
const params = {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 40,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
};
return (
<div className="swipebody">
<Swiper
{...params}
spaceBetween={50}
slidesPerView={5}
navigation
pagination={{
clickable: true,
renderBullet: (index, className) => {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
}}
keyboard={true}
mousewheel={true}
// scrollbar={{ draggable: true }}
>
<SwiperSlide className="swiper-slide">
<img src="https://picsum.photos/id/237/250/200" />
</SwiperSlide>
...
</Swiper>
</div>
);
};
export default SimpleSwiper;CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
.swipebody{
margin-top: 50px;
width: 100%;
height: 100%;
position: relative;
}
...