menu

react-id-swiper

Discussion for bugs and new features

Channels
Team

Move pagination position

July 19, 2019 at 8:50am

Move pagination position

July 19, 2019 at 8:50am
I was wondering if it's currently possible to render the Swiper pagination in a different position. It currently always renders below the swiper-wrapper div. In the regular Swiper library you could just place your pagination element in a different spot, which in some use cases can be useful.

October 28, 2019 at 7:01am
Good issue.
  • reply
  • like
I'd like you to post the solution
  • reply
  • like
I got solution
  • reply
  • like
const swiperParams = { spaceBetween: 0, slidesPerView: 2, slidesPerColumn: 2, pagination: { el: '.customized-swiper-pagination', clickable: true, }, };
  • reply
  • like
Please customize the customized-swiper-pagination class
  • reply
  • like

November 22, 2019 at 1:58pm
Hi , thanks for your response. Your proposed solution just changes the css class of the pagination. The position of the pagination element is still in the swiper-wrapper div. The only solution I could come up with so far for changing the pagination element position is building my own pagination component.
Edited
  • reply
  • like

March 14, 2020 at 7:33pm
Hey , can you please tell me how did you create your own component and put outside of the swiper component ?
  • reply
  • like
I ended up creating the Swiper with pagination and then moving it to the correct spot. It's a very dirty fix but it's the best one I could come up with.
Hope it helps you . If you find a better solution; feel free to share!
  • reply
  • like
thank you. Here is what I did
useEffect(() => {
const carouselBullets = document.querySelector(CarouselBullets);
const arrows = document.querySelector(`#${navigationID}`).childNodes[0];
carouselBullets.style.cssText = CarouselBulletsStyle;
carouselBullets.remove();
arrows.parentNode.insertBefore(carouselBullets, arrows.nextSibling);
},[]);
Edited
  • reply
  • like
  • reply
  • like
and the result
  • reply
  • like