Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

pagination render empty tag

See original GitHub issue


swiper: ^6.1.1,
react-id-swiper:  ^4.0.0

get nothing on pagination tag. It means it renders nothing in .pagination. Also, the fade effect does nothing.

here is my try:

// SlideShow.js
        slidesPerView: 'auto',
        pagination: {
           el: '.swiper-pagination',
           clickable: true
   { => {
    return ( 
      <div key={} className={styles.cardWrapper}>
          <EventCard card={card} />
// Carousel.js
export const Carousel = ({ children, options }) => {
	const defaultOption = {
                effect: 'fade',
		shouldSwiperUpdate: true,
		rebuildOnUpdate: true,
		grabCursor: true,
		spaceBetween: 10
	const sliderOption = Object.assign(defaultOption, options);

	return <Swiper {...sliderOption}>{children}</Swiper>;

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:6

github_iconTop GitHub Comments

Quirksmodecommented, Aug 26, 2020

I managed to fix the pagination by downgrading Swiper to version “5.4.5” as per this working example

imshingcommented, Aug 11, 2020

seems Swiper > 6.x.x already support React Component please check in here: its work fine with the pagination

Read more comments on GitHub >

github_iconTop Results From Across the Web

laravel 5.4 pagination links() method returns empty html
Solution : if paginator has only one page to show, it generates an empty links string.
Read more >
Pagination page empty -
Hello, I have a problem with pagination, when I click on page 2 I get no results. ... There is debugging enabled on...
Read more >
Pagination show blank/empty row when you're on the last ...
Encounter this problem when I'm on last page and if there's only 1 item in the table and I delete it. Table show...
Read more >
react-paginate: Implementing pagination in React | by Urvashi
For example, if the currentPage is 2 (or 3rd page since indexing starts from 0), the offset becomes 20, This means that the...
Read more >
Pagedlist pagination links anchor tags are empty / null
I am using Pagedlist for Pagination in my MVC project. Pagination is working for most of the cases. But in my FilterController and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found