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.

Why Carusel does not accept Next.js Image?

See original GitHub issue

We use react-responsive-carousel in our Next.js project. When we replaced img with Image to optimize thumbnail image size, thumbnails disappeared. Do you know why?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

stale[bot]commented, Feb 15, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

UsamaIrfancommented, Apr 26, 2022

I have fixed the issue using the renderThumbs property. I am using a combination of tailwindCSS and Next.js. My solution is as follows.

    renderThumbs={() =>, idx) => (
        <div key={idx} className="w-full h-20 relative">
    {product.images.length !== 0 &&, idx) => (
          alt={`${product.title} preview ${idx}`}
          priority={idx === 0}

My product.images is just an array containing links in the following format.

["", ""]

This worked perfectly fine for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

3 Ways to Implement a Carousel in Nextjs - Media Jams
Elastic Carousel is a flexible and responsive carousel component; it somehow does not support automatic cycling through content but has full ...
Read more >
Basic Features: Image Optimization - Next.js
To use a remote image, the src property should be a URL string, which can be relative or absolute. Because Next.js does not...
Read more >
How to add Image Carousel in NextJS ? - GeeksforGeeks
In this article, we are going to learn how we can add an Image Carousel in NextJS. NextJS is a React-based framework. It...
Read more >
4 Best Next.js Image Carousels: The Ultimate List - TurboFuture
It has a variety of features, including: Support for mobile gestures; Keyboard shortcuts; Image captions. However it doesn't currently have ...
Read more >
Carousel - React.js Examples
A simple image carousel built with React JS without any other dependencies. 22 June 2021 ... Feature-rich, react-way carousel component that does not...
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