{"id":27757,"date":"2023-04-28T06:00:00","date_gmt":"2023-04-28T13:00:00","guid":{"rendered":"http:\/\/3-ways-to-implement-a-carousel-in-nextjs"},"modified":"2025-10-10T14:49:18","modified_gmt":"2025-10-10T21:49:18","slug":"3-ways-to-implement-a-carousel-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs","title":{"rendered":"3 Ways to Implement a Carousel in Next.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Carousels, referred to as image sliders or sliders, provide an improved visual experience on websites by highlighting important aspects of a product, service or value proposition.<\/p>\n<p>This post discusses three different ways to add a carousel to our Next.js application.<\/p>\n<p>View the source code on Github <a href=\"https:\/\/github.com\/Kizmelvin\/next.js-carousels\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To follow this project, you\u2019ll need:<\/p>\n<ul>\n<li>Basic knowledge of CSS, Javascript, and React.js.<\/li>\n<li>A good understanding of Next.js, but it\u2019s not strictly required.<\/li>\n<li>Node.js installed on your computer.<\/li>\n<\/ul>\n<h2>Setting Up the Next.js Carousel Application<\/h2>\n<p>\nBefore we dive into the different methods of adding a carousel, it&#8217;s crucial to understand that while carousels can provide a dynamic visual element to your website, they also come with some performance and accessibility concerns. Thus, implementing them efficiently and in a user-friendly manner is vital.\n<\/p>\n<p>We\u2019ll run the following terminal command to create the Next.js app in a folder called next-carousels:<\/p>\n<pre><code>npx create-next-app next-carousels\n<\/code><\/pre>\n<p>Follow the prompts to complete the process, then navigate into the application directory and start the dev server with the following:<\/p>\n<pre><code>cd next-carousels \/\/ to navigate into the project directory\nnpm run dev \/\/ to run the dev server\n<\/code><\/pre>\n<p>In the browser, we should have the app live on localhost:3000.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1647511404\/e-622f7669a2248400693fd10e\/tapmuntghb1jwttenytw.png\" alt=\"Image showing Next.js welcome splash screen in set up step for nextjs slider carousel\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1099\" height=\"831\"\/><\/p>\n<p>Carousels don\u2019t automatically create optimal slide dimensions. We\u2019ll use additional utilities or custom styles to appropriately size it.<\/p>\n<p>We\u2019ll use component level styling. Learn how to use <a href=\"https:\/\/github.com\/css-modules\/css-modules\">CSS Modules<\/a> or see other Next.js built-in CSS support <a href=\"https:\/\/nextjs.org\/docs\/basic-features\/built-in-css-support\">here<\/a>.<\/p>\n<h2>Bootstrap Carousel<\/h2>\n<p>Built with CSS 3D transformations, this carousel automatically cycles through a series of images, text, or custom markup. It supports next\/prev controls and also supports indicators.<\/p>\n<p>We\u2019ll start by installing <code>react-bootstrap<\/code> with the following command so that we have access to the carousel component:<\/p>\n<pre><code>npm install react-bootstrap\n<\/code><\/pre>\n<p>Next, let\u2019s go to the public folder and create an <code>Items.json<\/code> file, which will house our image data. We\u2019ll structure our JSON object like below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">\n    <span class=\"hljs-comment\">\/\/public\/Items.json<\/span>\n    {\n      <span class=\"hljs-attr\">\"items\"<\/span>: {\n        <span class=\"hljs-attr\">\"bootstrap\"<\/span>: &#91;\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">1<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Photography\"<\/span>,\n            <span class=\"hljs-attr\">\"body\"<\/span>: <span class=\"hljs-string\">\"Bootstrap Carousel Example\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1586799813\/kizmelvin\/persons_pigeon_nurkq2.jpg\"<\/span>,\n            <span class=\"hljs-attr\">\"docs\"<\/span>: <span class=\"hljs-string\">\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/carousel\/\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">2<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"City Views\"<\/span>,\n            <span class=\"hljs-attr\">\"body\"<\/span>: <span class=\"hljs-string\">\"Bootstrap Carousel Example\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1587785064\/kizmelvin\/michael-BcgEo2CNeYA-unsplash_cdaruk.jpg\"<\/span>,\n            <span class=\"hljs-attr\">\"docs\"<\/span>: <span class=\"hljs-string\">\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/carousel\/\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">3<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Wild Life\"<\/span>,\n            <span class=\"hljs-attr\">\"body\"<\/span>: <span class=\"hljs-string\">\"Bootstrap Carousel Example\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1586799827\/kizmelvin\/brownlion_qm8hah.jpg\"<\/span>,\n            <span class=\"hljs-attr\">\"docs\"<\/span>: <span class=\"hljs-string\">\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/carousel\/\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">4<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Foods and Culture\"<\/span>,\n            <span class=\"hljs-attr\">\"body\"<\/span>: <span class=\"hljs-string\">\"Bootstrap Carousel Example\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1587870308\/kizmelvin\/edvin-johansson-5AylXcpJn1I-unsplash_lbhgod.jpg\"<\/span>,\n            <span class=\"hljs-attr\">\"docs\"<\/span>: <span class=\"hljs-string\">\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/carousel\/\"<\/span>\n          }\n        ]\n      }\n    }\n   \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019ll create a carousels folder in the root directory and inside the folder, create <code>Bootstrap.js<\/code> file with the following code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n    <span class=\"hljs-comment\">\/\/carousels\/Bootstrap.js<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { items } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/public\/Items.json\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { Carousel } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react-bootstrap\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\"bootstrap\/dist\/css\/bootstrap.min.css\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Bootstrap.module.css\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">BootstrapCarousel<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> { bootstrap } = items;\n      <span class=\"hljs-keyword\">const<\/span> &#91;index, setIndex] = useState(<span class=\"hljs-number\">0<\/span>);\n      <span class=\"hljs-keyword\">const<\/span> handleSelect = <span class=\"hljs-function\">(<span class=\"hljs-params\">selectedIndex, e<\/span>) =&gt;<\/span> {\n        setIndex(selectedIndex);\n      };\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span> <span class=\"hljs-attr\">activeIndex<\/span>=<span class=\"hljs-string\">{index}<\/span> <span class=\"hljs-attr\">onSelect<\/span>=<span class=\"hljs-string\">{handleSelect}<\/span>&gt;<\/span>\n          {bootstrap.map((item) =&gt; (\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel.Item<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.itemP}<\/span> <span class=\"hljs-attr\">interval<\/span>=<span class=\"hljs-string\">{4000}<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{item.imageUrl}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"slides\"<\/span> \/&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel.Caption<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.caption}<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>{item.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{item.body}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"btn btn-danger\"<\/span>&gt;<\/span>Visit Docs<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Carousel.Caption<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Carousel.Item<\/span>&gt;<\/span>\n          ))}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Carousel<\/span>&gt;<\/span><\/span>\n      );\n    }\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019ve imported our JSON object in the above code block, and got the <code>Carousel<\/code> component from the <code>react-bootstrap<\/code> module.<\/p>\n<p>Then, we looped through the <code>bootstrap<\/code> array destructured from <code>items<\/code> and rendered a Carousel component.<\/p>\n<p>Also, we imported bootstrap minified CSS and our custom styles from <code>styles\/Bootstrap.module.css<\/code>.<\/p>\n<p>In <code>index.js<\/code>, let\u2019s clean it up, import our BootstrapCarousel component, and render it.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n    <span class=\"hljs-comment\">\/\/pages\/index.js<\/span>\n    <span class=\"hljs-keyword\">import<\/span> Head <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/head\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> BootstrapCarousel <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/carousels\/Bootstrap\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Home<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Next.js Carousels<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Generated by create next app\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"icon\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/favicon.ico\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">BootstrapCarousel<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, if we go over to the browser, we\u2019ll see a functional carousel.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1647512893\/e-622f7669a2248400693fd10e\/n86dqrurezr0s9sbqmoa.gif\" alt=\"Image showing example of nextjs slider\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"620\"\/><\/p>\n<p>Visit the <a href=\"https:\/\/react-bootstrap.github.io\/components\/carousel\/\">documentation<\/a> for more carousel configurations and customizations.<\/p>\n<h2>Elastic Carousel<\/h2>\n<p>Elastic Carousel is a flexible and responsive carousel component; it somehow does not support automatic cycling through content but has full support for RTL(right to left) rendering and animations.<\/p>\n<p>As a first step, we\u2019ll install the library with the following command:<\/p>\n<pre><code>npm install react-elastic-carousel \n<\/code><\/pre>\n<p>Next, we\u2019ll nest another set of data in our <code>Items.json<\/code> for the elastic carousel just like we did for the bootstrap carousel.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">\n    <span class=\"hljs-comment\">\/\/public\/Items.json<\/span>\n    {\n      <span class=\"hljs-attr\">\"items\"<\/span>: {\n        <span class=\"hljs-attr\">\"bootstrap\"<\/span>: &#91;\n          #bootstrap objects\n        ],\n        <span class=\"hljs-attr\">\"elastic\"<\/span>: &#91;\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">1<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Photoshoots\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1645530542\/kizmelvin\/Carousel%20assets\/luwadlin-bosman-J1oObe7WWjk-unsplash_f56oh3.jpg\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">2<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Adventure\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1645529949\/kizmelvin\/Carousel%20assets\/ali-kazal-q9rpNOd1hcI-unsplash_fhaqzq.jpg\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">3<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Events\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1645530199\/kizmelvin\/Carousel%20assets\/slim-emcee-jzdOX0XkXr8-unsplash_zocsdq.jpg\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">4<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Discovery\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1645530863\/kizmelvin\/Carousel%20assets\/francisco-t-santos-YRcioOWh4mA-unsplash_1_yoowse.jpg\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">5<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Sports\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/v1645531100\/kizmelvin\/Carousel%20assets\/markus-spiske-WUehAgqO5hE-unsplash_zi9wvh.jpg\"<\/span>\n          }\n        ]\n      }\n    }\n    \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, in the carousels folder, let\u2019s create an <code>Elastic.js<\/code> file and build the carousel.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n    <span class=\"hljs-comment\">\/\/carousels\/Elastic.js<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { items } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/public\/Items.json\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> Carousel <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react-elastic-carousel\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Elastic.module.css\"<\/span>;\n    <span class=\"hljs-keyword\">const<\/span> breakPoints = &#91;\n      { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-attr\">itemsToShow<\/span>: <span class=\"hljs-number\">1<\/span> },\n      { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">550<\/span>, <span class=\"hljs-attr\">itemsToShow<\/span>: <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-attr\">itemsToScroll<\/span>: <span class=\"hljs-number\">2<\/span> },\n      { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">768<\/span>, <span class=\"hljs-attr\">itemsToShow<\/span>: <span class=\"hljs-number\">2<\/span> },\n      { <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">1200<\/span>, <span class=\"hljs-attr\">itemsToShow<\/span>: <span class=\"hljs-number\">3<\/span> }\n    ];\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">ElasticCarousel<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> { elastic } = items;\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>React Elastic Carousel Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">hr<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.seperator}<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.contWrapper}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span> <span class=\"hljs-attr\">breakPoints<\/span>=<span class=\"hljs-string\">{breakPoints}<\/span>&gt;<\/span>\n              {elastic.map((item) =&gt; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>\n                  <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span>\n                  <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.card}<\/span>\n                  <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span> <span class=\"hljs-attr\">backgroundImage:<\/span> `<span class=\"hljs-attr\">url<\/span>(${<span class=\"hljs-attr\">item.imageUrl<\/span>})` }}\n                &gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.title}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>{item.title} <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              ))}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Carousel<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019ve destructured <code>elastic<\/code> from the <code>items<\/code> dataset we imported above. Afterwards, we looped through the <code>elastic<\/code> json objects and used the <code>Carousel<\/code> component we imported from <code>react-elastic-carousel<\/code> to render the second carousel.<\/p>\n<p>In <code>pages\/index.js<\/code>, we\u2019ll import the ElasticCarousel component and render it right after the BootstrapCarousel element.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1647518298\/e-622f7669a2248400693fd10e\/fgyii3rgc1rou5a97vdp.gif\" alt=\"Image showing example of nextjs carousel using Bootstrap Carousel\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"600\" height=\"476\"\/><\/p>\n<p>In the browser, the project should look like the above. Learn more about this carousel <a href=\"https:\/\/www.npmjs.com\/package\/react-elastic-carousel\">here<\/a>.<\/p>\n<h2>React Responsive Carousel<\/h2>\n<p>This is an excellent <a href=\"https:\/\/www.npmjs.com\/package\/react-responsive-carousel\">carousels<\/a> component with a robust amount of <a href=\"https:\/\/github.com\/leandrowd\/react-responsive-carousel\">options and configurations<\/a>. It supports thumbnails, vertical scrolling and a fading effect, but not dragging.<\/p>\n<p>Let\u2019s install the package with the following command:<\/p>\n<pre><code>npm install react-responsive-carousel\n<\/code><\/pre>\n<p>We\u2019ll update the data set in the <code>Item.json<\/code> file for the responsive carousel.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">\n    <span class=\"hljs-comment\">\/\/public\/Items.json<\/span>\n    {\n      <span class=\"hljs-attr\">\"items\"<\/span>: {\n        <span class=\"hljs-attr\">\"bootstrap\"<\/span>: &#91;\n         #bootstrap carousel objects\n        ],\n        <span class=\"hljs-attr\">\"elastic\"<\/span>: &#91;\n        #elastic carousel objects  \n        ],\n        <span class=\"hljs-attr\">\"responsive\"<\/span>: &#91;\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">1<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Swiper Carousel Example\"<\/span>,\n            <span class=\"hljs-attr\">\"text\"<\/span>: <span class=\"hljs-string\">\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos mollitia sed quod consectetur at quam dolore praesentium neque eos assumenda iusto nam laborum laboriosam odio blanditiis possimus accusantium recusandae porro exercitationem itaque\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/w_1000,c_fill,ar_1:1,g_auto,r_max,bo_5px_solid_red,b_rgb:262c35\/v1597364662\/kizmelvin\/ussama-azam-hlg-ltdCoI0-unsplash_ttfjib.jpg\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">2<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Swiper Carousel Example\"<\/span>,\n            <span class=\"hljs-attr\">\"text\"<\/span>: <span class=\"hljs-string\">\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos mollitia sed quod consectetur at quam dolore praesentium neque eos assumenda iusto nam laborum laboriosam odio blanditiis possimus accusantium recusandae porro exercitationem itaque\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/w_1000,c_fill,ar_1:1,g_auto,r_max,bo_5px_solid_red,b_rgb:262c35\/v1645530199\/kizmelvin\/Carousel%20assets\/slim-emcee-jzdOX0XkXr8-unsplash_zocsdq.jpg\"<\/span>\n          },\n          {\n            <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">3<\/span>,\n            <span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Swiper Carousel Example\"<\/span>,\n            <span class=\"hljs-attr\">\"text\"<\/span>: <span class=\"hljs-string\">\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos mollitia sed quod consectetur at quam dolore praesentium neque eos assumenda iusto nam laborum laboriosam odio blanditiis possimus accusantium recusandae porro exercitationem itaque\"<\/span>,\n            <span class=\"hljs-attr\">\"imageUrl\"<\/span>: <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/kizmelvin\/image\/upload\/w_1000,c_fill,ar_1:1,g_auto,r_max,bo_5px_solid_red,b_rgb:262c35\/v1645534321\/kizmelvin\/Carousel%20assets\/luwadlin-bosman-J1oObe7WWjk-unsplash_f56oh3.jpg\"<\/span>\n          }\n        ]\n      }\n    }\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now, we\u2019ll create a <code>Responsive.js<\/code> file inside the carousels folder and implement the carousel.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">\n    <span class=\"hljs-comment\">\/\/carousels\/Responsive.js<\/span>\n    <span class=\"hljs-keyword\">import<\/span> { Carousel } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react-responsive-carousel\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> { items } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/public\/Items.json\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\"react-responsive-carousel\/lib\/styles\/carousel.min.css\"<\/span>;\n    <span class=\"hljs-keyword\">import<\/span> styles <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"..\/styles\/Responsive.module.css\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">ResponsiveCarousel<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n      <span class=\"hljs-keyword\">const<\/span> { responsive } = items;\n      <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.container}<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span>\n            <span class=\"hljs-attr\">showArrows<\/span>=<span class=\"hljs-string\">{true}<\/span>\n            <span class=\"hljs-attr\">showIndicators<\/span>=<span class=\"hljs-string\">{true}<\/span>\n            <span class=\"hljs-attr\">infiniteLoop<\/span>=<span class=\"hljs-string\">{true}<\/span>\n            <span class=\"hljs-attr\">dynamicHeight<\/span>=<span class=\"hljs-string\">{false}<\/span>\n            <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.mySwiper}<\/span>\n          &gt;<\/span>\n            {responsive.map((item) =&gt; (\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.swipItem}<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.imgBox}<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{item.imageUrl}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"slides\"<\/span> \/&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{styles.detail}<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>{item.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{item.text}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            ))}\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Carousel<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n      );\n    }\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We\u2019ve imported the <code>Carousel<\/code> component from <code>react-responsive-carousel<\/code> and used it to display our <code>responsive<\/code> json object. Also, notice that we brought in the corresponding CSS module from the Styles folder.<\/p>\n<p>Import the <code>ResponsiveCarousel<\/code> component inside <code>index.js<\/code> and render it after the <code>ElasticCarousel<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    #pages\/index.js\n    import Head from \"next\/head\";\n    import BootstrapCarousel from \"..\/carousels\/Bootstrap\";\n    import ElasticCarousel from \"..\/carousels\/Elastic\";\n    import ResponsiveCarousel from \"..\/carousels\/Responsive\";\n    export default function Home() {\n      return (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Next.js Carousels<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"description\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"Generated by create next app\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"icon\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/favicon.ico\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Head<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">BootstrapCarousel<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ElasticCarousel<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ResponsiveCarousel<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      );\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Then in the browser, we should now see the three different carousels with different options and customizations.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1647518633\/e-622f7669a2248400693fd10e\/gvlogkrjfoep7ixmqgry.gif\" alt=\"Image showing example of a webpage with 3 different nextjs carousel options using Elastic Carousel\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"600\" height=\"470\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>\nWhen implementing carousels in Next.js or any other framework, always consider the impact on performance and user experience. While they can be visually appealing, a poorly implemented carousel might result in longer loading times and difficulties for users in navigating the content. Always prioritize user experience and test the carousel&#8217;s performance across different devices and browsers.\n<\/p>\n<p>We\u2019ve discussed three different ways to add a carousel in a next.js projects. Although this post covers the basic implementation of these carousels, there are more configurations in their respective documentations.<\/p>\n<p>It\u2019s also worth noting that carousels aren\u2019t entirely compliant with <a href=\"https:\/\/cloudinary.com\/blog\/website-accessibility-alt-text-generation\">web accessibility<\/a> standards.<\/p>\n<p>See how <a href=\"https:\/\/cloudinary.com\/developers\">Cloudinary<\/a> makes it easier for developers to deliver rich web and app experiences.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":28621,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[426,134,370,212,246],"class_list":["post-27757","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-featured","tag-guest-post","tag-image","tag-next-js","tag-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>3 Ways to Implement a Carousel in Next.js<\/title>\n<meta name=\"description\" content=\"Carousels improve visual experiences by highlighting a product, service, or value proposition. Read 3 ways to add a carousel to our Next.js application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Ways to Implement a Carousel in Next.js\" \/>\n<meta property=\"og:description\" content=\"Carousels improve visual experiences by highlighting a product, service, or value proposition. Read 3 ways to add a carousel to our Next.js application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-28T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-10T21:49:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"3 Ways to Implement a Carousel in Next.js\",\"datePublished\":\"2023-04-28T13:00:00+00:00\",\"dateModified\":\"2025-10-10T21:49:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA\",\"keywords\":[\"Featured\",\"Guest Post\",\"Image\",\"Next.js\",\"React\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs\",\"url\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs\",\"name\":\"3 Ways to Implement a Carousel in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA\",\"datePublished\":\"2023-04-28T13:00:00+00:00\",\"dateModified\":\"2025-10-10T21:49:18+00:00\",\"description\":\"Carousels improve visual experiences by highlighting a product, service, or value proposition. Read 3 ways to add a carousel to our Next.js application.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing code and example of a nextjs slider carousel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3 Ways to Implement a Carousel in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"3 Ways to Implement a Carousel in Next.js","description":"Carousels improve visual experiences by highlighting a product, service, or value proposition. Read 3 ways to add a carousel to our Next.js application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs","og_locale":"en_US","og_type":"article","og_title":"3 Ways to Implement a Carousel in Next.js","og_description":"Carousels improve visual experiences by highlighting a product, service, or value proposition. Read 3 ways to add a carousel to our Next.js application.","og_url":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs","og_site_name":"Cloudinary Blog","article_published_time":"2023-04-28T13:00:00+00:00","article_modified_time":"2025-10-10T21:49:18+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"3 Ways to Implement a Carousel in Next.js","datePublished":"2023-04-28T13:00:00+00:00","dateModified":"2025-10-10T21:49:18+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA","keywords":["Featured","Guest Post","Image","Next.js","React"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs","url":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs","name":"3 Ways to Implement a Carousel in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA","datePublished":"2023-04-28T13:00:00+00:00","dateModified":"2025-10-10T21:49:18+00:00","description":"Carousels improve visual experiences by highlighting a product, service, or value proposition. Read 3 ways to add a carousel to our Next.js application.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing code and example of a nextjs slider carousel"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/3-ways-to-implement-a-carousel-in-nextjs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"3 Ways to Implement a Carousel in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-Carousel-in-Nextjs\/blog-Carousel-in-Nextjs.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27757"}],"version-history":[{"count":11,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27757\/revisions"}],"predecessor-version":[{"id":38737,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27757\/revisions\/38737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28621"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}