{"id":27763,"date":"2023-06-12T07:00:00","date_gmt":"2023-06-12T14:00:00","guid":{"rendered":"http:\/\/add-a-responsive-image-carousel-to-your-react-app"},"modified":"2025-10-15T12:37:11","modified_gmt":"2025-10-15T19:37:11","slug":"add-a-responsive-image-carousel-to-your-react-app","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app","title":{"rendered":"Add a Responsive Image Carousel to Your React App"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><a href=\"https:\/\/cloudinary.com\/glossary\/image-carousels\">Sliders (also known as carousels)<\/a> are popular ways to display web content such as testimonials, portfolio media, e-commerce sales, and so on for a variety of reasons, including their ability to moderate space usage on your website and interactively display these types of content, provide a great way to tell a story, do a presentation, and so on.<\/p>\n<p>When using sliders, it is important to ensure that they are user-friendly and responsive on various devices, particularly mobile devices, which are becoming more popular.<\/p>\n<p>In this article you\u2019ll learn how to use the react responsive carousel module (package can be found <a href=\"https:\/\/www.npmjs.com\/package\/react-responsive-carousel\">here<\/a>) to include a responsive and customizable slider to a react app. We will use this package to create a simple image gallery and add some customizations to it. Throughout, we\u2019ll give clear React-responsive-carousel examples you can use right away to create dynamic sliders that will make your web pages come alive.<\/p>\n<p>Here is a <a href=\"https:\/\/stackblitz.com\/edit\/github-wj6vna?embed=1&amp;file=src%2FApp.js\">link<\/a> to the demo StackBlitz.<\/p>\n<iframe src=\"https:\/\/stackblitz.com\/edit\/github-wj6vna?embed=1&#038;file=src%2FApp.js&#038;view=preview\"\n     style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n     title=\"cld-angular-sdk-quick-start\"\n     allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n     sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n   ><\/iframe>\n<\/div>\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Setting Up the React Image Carousel Project<\/h2>\n<p>Create a <a href=\"https:\/\/reactjs.org\/\">React<\/a> application using the following command:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npx create-react-app carousel-react\n<\/code><\/span><\/pre>\n<p>Next, let\u2019s add the project dependency:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm install react-responsive-carousel\n<\/code><\/span><\/pre>\n<h2>Building a Basic React Responsive Carousel (aka Image Slider)<\/h2>\n<p>Add the following to your <code>src\/App.js<\/code> file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><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> <span class=\"hljs-string\">\"react-responsive-carousel\/lib\/styles\/carousel.min.css\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">\".\/App.css\"<\/span>;\n<span class=\"hljs-keyword\">const<\/span> images = &#91;\n  <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1652345767\/docs\/demo_image2.jpg\"<\/span>,\n  <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1652366604\/docs\/demo_image5.jpg\"<\/span>,\n  <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1652345874\/docs\/demo_image1.jpg\"<\/span>,\n];\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/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> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span> <span class=\"hljs-attr\">useKeyboardArrows<\/span>=<span class=\"hljs-string\">{true}<\/span>&gt;<\/span>\n        {images.map((URL, index) =&gt; (\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"slide\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"sample_file\"<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{URL}<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{index}<\/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<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><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>This component is quite simple. Starting at the top, we import the Carousel component and its accompanying CSS styles, followed by our CSS file.<\/p>\n<blockquote>\n<p>The order of loading styles is important so that our custom styles can override the former when we want to make some changes later.<\/p>\n<\/blockquote>\n<p>Since we are building an <a href=\"https:\/\/fixthephoto.com\/best-photo-slideshow-app.html\" target=\"_blank\">image slideshow<\/a>, we stored URLs to some image files in an array. Next, In the <code>App<\/code> component, we return some JSX, which renders the <code>Carousel<\/code> component with one prop (we will discuss more available props in the next section) named <code>useKeyboardArrows<\/code>, whose value is set to <code>true<\/code>. Setting it to <code>true<\/code> allows the user to control the slider using the arrow keys on the keyboard, which improves the user experience. Finally, within the <code>Carousel<\/code> component, we iterate over the images that make up our slide show and render them to the screen.<\/p>\n<p>We\u2019ll also need some styles to give the application a nice appearance. Copy the styles in this <a href=\"https:\/\/stackblitz.com\/edit\/github-wj6vna?file=src%2FApp.css\">StackBlitz link<\/a> to your <code>src\/App.css<\/code> file.<\/p>\n<p>Now we can start our application on <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a> using the following command:<\/p>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">npm start\n<\/code><\/span><\/pre>\n<p>With just this basic setup, you see the image slider rendered on the screen, as seen below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DDEE26C258C91D73FC5E60F595B16E2592B8377364C55B8630B36D5C3EFC6347_1654587855898_CleanShot+2022-06-07+at+08.43.55.gif\" alt=\"GIF image showing react image carousel example\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"294\"\/><\/p>\n<h2>Customizing the Slider for react-responsive-carousel<\/h2>\n<p>The <code>Carousel<\/code> component ships with a lot of properties that allow us to tailor the appearance and feel of the slider to the needs of our application.<\/p>\n<p>Before we start customizing the slider, let\u2019s look at two React-responsive-carousel examples. The first shows the major parts of a typical slider. The second one is a more schematic view of the first, and it includes most of the available customizable properties associated with each part of the slider and their respective data types.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DDEE26C258C91D73FC5E60F595B16E2592B8377364C55B8630B36D5C3EFC6347_1654588682851_CleanShot+2022-06-07+at+08.47.302x.png\" alt=\"Image of cityscape showing a diagram of react image carousel example components of a typical slider\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"713\"\/><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_C8947DD9BF3E1CC5A88AE6E8CCA9C185752A9635E00271D593E748FD02928F28_1654261863494_opp.png\" alt=\"Image of cathedral showing a diagram of react carousel components of a typical slider\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1358\"\/><\/p>\n<p>Of course, we will not go through all the available properties; instead, the list below identifies typical customization concerns that one may be interested in:<\/p>\n<ul>\n<li>Customizing the slider\u2019s control buttons.<\/li>\n<li>Customizing the indicators.<\/li>\n<li>Customizing the slider\u2019s status text.<\/li>\n<li>Customizing the slider\u2019s animation.<\/li>\n<\/ul>\n<p>For each item above, where appropriate, we would add the required props to the <code>Carousel<\/code> component to customize it.<\/p>\n<h2>Customizing the Slider\u2019s Control Buttons<\/h2>\n<p>We would need some icons to serve as the buttons; Let\u2019s create an SVG file that would house icons for our next and previous buttons. Create this file using the following command:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">cd<\/span> <span class=\"hljs-selector-tag\">src<\/span>\n<span class=\"hljs-selector-tag\">touch<\/span> <span class=\"hljs-selector-tag\">sprite<\/span><span class=\"hljs-selector-class\">.svg<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Add the following to the file:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hidden\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">symbol<\/span>\n    <span class=\"hljs-attr\">clip-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span>\n    <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"evenodd\"<\/span>\n    <span class=\"hljs-attr\">stroke-linejoin<\/span>=<span class=\"hljs-string\">\"round\"<\/span>\n    <span class=\"hljs-attr\">stroke-miterlimit<\/span>=<span class=\"hljs-string\">\"2\"<\/span>\n    <span class=\"hljs-attr\">xmlns<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span>\n    <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 0 24 24\"<\/span>\n    <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"right\"<\/span>\n  &gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span>\n      <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m12.007 2c-5.518 0-9.998 4.48-9.998 9.998 0 5.517 4.48 9.997 9.998 9.997s9.998-4.48 9.998-9.997c0-5.518-4.48-9.998-9.998-9.998zm1.523 6.21s1.502 1.505 3.255 3.259c.147.147.22.339.22.531s-.073.383-.22.53c-1.753 1.754-3.254 3.258-3.254 3.258-.145.145-.335.217-.526.217-.192-.001-.384-.074-.531-.221-.292-.293-.294-.766-.003-1.057l1.977-1.977h-6.693c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h6.693l-1.978-1.979c-.29-.289-.287-.762.006-1.054.147-.147.339-.221.53-.222.19 0 .38.071.524.215z\"<\/span>\n      <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">path<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">symbol<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">symbol<\/span> <span class=\"hljs-attr\">xmlns<\/span>=<span class=\"hljs-string\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span> <span class=\"hljs-attr\">viewBox<\/span>=<span class=\"hljs-string\">\"0 0 24 24\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"left\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">path<\/span>\n      <span class=\"hljs-attr\">d<\/span>=<span class=\"hljs-string\">\"m12.012 2c5.518 0 9.997 4.48 9.997 9.998 0 5.517-4.479 9.997-9.997 9.997s-9.998-4.48-9.998-9.997c0-5.518 4.48-9.998 9.998-9.998zm-1.523 6.21s-1.502 1.505-3.255 3.259c-.147.147-.22.339-.22.531s.073.383.22.53c1.753 1.754 3.254 3.258 3.254 3.258.145.145.335.217.526.217.192-.001.384-.074.531-.221.292-.293.294-.766.003-1.057l-1.977-1.977h6.693c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-6.693l1.978-1.979c.29-.289.287-.762-.006-1.054-.147-.147-.339-.221-.53-.222-.19 0-.38.071-.524.215z\"<\/span>\n      <span class=\"hljs-attr\">fill-rule<\/span>=<span class=\"hljs-string\">\"nonzero\"<\/span>\n    &gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">path<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">symbol<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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>Update <code>App.js<\/code> file to import the <code>sprite.svg<\/code> file as shown below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/...<\/span>\n<span class=\"hljs-keyword\">import<\/span> sprite <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\".\/sprite.svg\"<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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>Next, let\u2019s update the <code>App<\/code> component to include two new props: <code>renderArrowNext<\/code> and <code>renderArrowPrev<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    function App() {\n      return (\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Carousel<\/span>\n            <span class=\"hljs-attr\">showIndicators<\/span>\n            <span class=\"hljs-attr\">renderArrowNext<\/span>=<span class=\"hljs-string\">{(clickHandler,<\/span> <span class=\"hljs-attr\">hasNext<\/span>) =&gt;<\/span> {\n              return (\n                hasNext &amp;&amp; (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav_btn nav_btn_right\"<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{clickHandler}<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">use<\/span> <span class=\"hljs-attr\">xlinkHref<\/span>=<span class=\"hljs-string\">{sprite<\/span> + \"#<span class=\"hljs-attr\">right<\/span>\"}&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">use<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                )\n              );\n            }}\n            renderArrowPrev={(clickHandler, hasNext) =&gt; {\n              return (\n                hasNext &amp;&amp; (\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{clickHandler}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"nav_btn nav_btn_left\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\n                      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">use<\/span> <span class=\"hljs-attr\">xlinkHref<\/span>=<span class=\"hljs-string\">{sprite<\/span> + \"#<span class=\"hljs-attr\">left<\/span>\"}&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">use<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">svg<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                )\n              );\n            }}\n          &gt;\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\">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>Both props receive a function value that accepts three parameters each, but we used two of them here: <code>clickHandler<\/code> is a callback that will be used to change slides, and the other called <code>hasNext<\/code> is a boolean that tells us if there is a next slide. Based on these parameters, we simply render a button if there is an available slide. We added some class names for styling and the <code>clickHandler<\/code> callback function to each button.<\/p>\n<p>If you run your app now, you should see the newly added buttons as shown below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DDEE26C258C91D73FC5E60F595B16E2592B8377364C55B8630B36D5C3EFC6347_1654591044824_CleanShot+2022-06-07+at+09.36.432x.png\" alt=\"Image of cityscape showing position of carousel react buttons\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"719\"\/><\/p>\n<h2>Customizing the Indicators for react-responsive-carousel<\/h2>\n<p>We would include a prop called <code>renderIndicator<\/code> to customize our indicators. Let\u2019s update our Carousel component with the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> (\n        &lt;div className=<span class=\"hljs-string\">\"box\"<\/span>&gt;\n          &lt;Carousel\n            showIndicators\n            renderArrowNext={(clickHandler, hasNext) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            renderArrowPrev={(clickHandler, hasNext) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            renderIndicator={(clickHandler, isSelected, index) =&gt; {\n              <span class=\"hljs-keyword\">return<\/span> (\n                &lt;li\n                  onClick={clickHandler}\n                  className={`ind ${isSelected ? <span class=\"hljs-string\">\"active\"<\/span> : <span class=\"hljs-string\">\"\"<\/span>}`}\n                  key={index}\n                  role=<span class=\"hljs-string\">\"button\"<\/span>\n                \/&gt;\n              );\n            }}\n          &gt;\n          <span class=\"hljs-comment\">\/\/...<\/span>\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\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>renderIndicator<\/code> prop accepts a function that will be called a certain number of times based on the number of slides in our slideShow. In our case, it will be called three times since we have three images. The function also accepts three parameters, and it simply returns some basic JSX.<\/p>\n<p>If you run your app now, you should see the indicators as shown below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DDEE26C258C91D73FC5E60F595B16E2592B8377364C55B8630B36D5C3EFC6347_1654592754485_CleanShot+2022-06-07+at+10.05.302x.png\" alt=\"Image of beach showing react carousel slideshow indicators\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"531\"\/><\/p>\n<h2>Customizing the Slider\u2019s Status Text<\/h2>\n<p>The Carousel\u2019s status text helps to give users informative feedback, such as the current point in the slideshow and the available number of slides. To customize the status text, we can use the <code>statusFormatter<\/code> prop. Let\u2019s update our <code>App.js<\/code> file with the following to include this prop:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n      <span class=\"hljs-keyword\">return<\/span> (\n        &lt;div className=<span class=\"hljs-string\">\"box\"<\/span>&gt;\n          &lt;Carousel\n            renderArrowNext={(clickHandler, hasNext) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            renderArrowPrev={(clickHandler, hasNext) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            renderIndicator={(clickHandler, isSelected, index) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            statusFormatter={(currentItem, total) =&gt; {\n              <span class=\"hljs-keyword\">return<\/span> (\n                &lt;p&gt;\n                  image {currentItem} of {total}\n                &lt;\/p&gt;\n              );\n            }}\n          &gt;\n          <span class=\"hljs-comment\">\/\/.<\/span>\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\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>statusFormatter<\/code> prop accepts a function that expects two parameters. The first parameter called <code>currentItem<\/code> is a number representing the active slide, while the <code>total<\/code> parameter represents the total number of available slides. Here we simply render a <code>p<\/code> tag with some text that includes these parameters.<\/p>\n<p>Run your app now, and you should see the changes made to the status text as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DDEE26C258C91D73FC5E60F595B16E2592B8377364C55B8630B36D5C3EFC6347_1654593349712_CleanShot+2022-06-07+at+10.15.272x.png\" alt=\"Image of beach with image carousel react parameter total slides\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"666\"\/><\/p>\n<h2>Customizing the Slider\u2019s Animation<\/h2>\n<p>It is also a common requirement to customize how each slide animates in and out of the page. By default, the <code>Carousel<\/code> component uses a sliding animation and provides us with several props to customize this behavior, such as <code>swipeAnimationHandler<\/code>, <code>animationHandler<\/code>, or <code>stopSwipingHandler<\/code>. Update your <code>App.js<\/code> file with the following:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">    <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n\n      <span class=\"hljs-keyword\">const<\/span> rotateAnimationHandler = (props, state) =&gt; {\n        <span class=\"hljs-keyword\">const<\/span> transitionTime = props.transitionTime + <span class=\"hljs-string\">\"ms\"<\/span>;\n        <span class=\"hljs-keyword\">const<\/span> transitionTimingFunction = <span class=\"hljs-string\">\"ease-in-out\"<\/span>;\n        let slideStyle = {\n          display: <span class=\"hljs-string\">\"block\"<\/span>,\n          minHeight: <span class=\"hljs-string\">\"100%\"<\/span>,\n          transitionTimingFunction: transitionTimingFunction,\n          msTransitionTimingFunction: transitionTimingFunction,\n          MozTransitionTimingFunction: transitionTimingFunction,\n          WebkitTransitionTimingFunction: transitionTimingFunction,\n          OTransitionTimingFunction: transitionTimingFunction,\n          transform: `rotate(<span class=\"hljs-number\">0<\/span>)`,\n          position:\n            state.previousItem === state.selectedItem ? <span class=\"hljs-string\">\"relative\"<\/span> : <span class=\"hljs-string\">\"absolute\"<\/span>,\n          inset: <span class=\"hljs-string\">\"0 0 0 0\"<\/span>,\n          zIndex: state.previousItem === state.selectedItem ? <span class=\"hljs-string\">\"1\"<\/span> : <span class=\"hljs-string\">\"-2\"<\/span>,\n          opacity: state.previousItem === state.selectedItem ? <span class=\"hljs-string\">\"1\"<\/span> : <span class=\"hljs-string\">\"0\"<\/span>,\n          WebkitTransitionDuration: transitionTime,\n          MozTransitionDuration: transitionTime,\n          OTransitionDuration: transitionTime,\n          transitionDuration: transitionTime,\n          msTransitionDuration: transitionTime,\n        };\n        <span class=\"hljs-keyword\">return<\/span> {\n          slideStyle,\n          selectedStyle: {\n            ...slideStyle,\n            opacity: <span class=\"hljs-number\">1<\/span>,\n            position: <span class=\"hljs-string\">\"relative\"<\/span>,\n            zIndex: <span class=\"hljs-number\">2<\/span>,\n            filter: `blur(<span class=\"hljs-number\">0<\/span>)`,\n          },\n          prevStyle: {\n            ...slideStyle,\n            transformOrigin: <span class=\"hljs-string\">\" 0 100%\"<\/span>,\n            transform: `rotate(${\n              state.previousItem &gt; state.selectedItem ? <span class=\"hljs-string\">\"-45deg\"<\/span> : <span class=\"hljs-string\">\"45deg\"<\/span>\n            })`,\n            opacity: <span class=\"hljs-string\">\"0\"<\/span>,\n            filter: `blur( ${\n              state.previousItem === state.selectedItem ? <span class=\"hljs-string\">\"0px\"<\/span> : <span class=\"hljs-string\">\"5px\"<\/span>\n            })`,\n          },\n        };\n      };\n\n      <span class=\"hljs-keyword\">return<\/span> (\n        &lt;div className=<span class=\"hljs-string\">\"box\"<\/span>&gt;\n          &lt;Carousel\n            renderArrowNext={(clickHandler, hasNext) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            renderArrowPrev={(clickHandler, hasNext) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            renderIndicator={(clickHandler, isSelected, index) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            statusFormatter={(currentItem, total) =&gt; {\n              <span class=\"hljs-comment\">\/\/...<\/span>\n            }}\n            transitionTime={<span class=\"hljs-number\">310<\/span>}\n            animationHandler={rotateAnimationHandler}\n            swipeable={<span class=\"hljs-keyword\">false<\/span>}\n          &gt;\n          <span class=\"hljs-comment\">\/\/...<\/span>\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\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code above, we included three additional props and set their respective values. We set the transition time for each slide to 310 milliseconds. Next, we defined our <code>animationHandler<\/code> prop, which expects a string or a function, and we set it to a function called <code>rotateAnimationHandler<\/code>.<\/p>\n<p>The <code>rotateAnimationHandler<\/code> function accepts two parameters, both of which are objects. The first one, called <code>props<\/code>, holds the entire properties the <code>Carousel<\/code> component accepts. The properties we didn\u2019t use maintain their initial values. The second one, called <code>state<\/code>, holds information concerned with the state of the slides. For clarity, some of the properties in this object include the following properties:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    {\n      <span class=\"hljs-attr\">cancelClick<\/span>: boolean,\n      <span class=\"hljs-attr\">hasMount<\/span>: boolean,\n      <span class=\"hljs-attr\">initialized<\/span>: boolean,\n      <span class=\"hljs-attr\">isMouseEntered<\/span>: boolean,\n      <span class=\"hljs-attr\">itemListStyle<\/span>: object,\n      <span class=\"hljs-attr\">itemSize<\/span>: number,\n      <span class=\"hljs-attr\">prevStyle<\/span>: <span class=\"hljs-built_in\">Object<\/span>,\n      <span class=\"hljs-attr\">previousItem<\/span>: number,\n      <span class=\"hljs-attr\">selectedItem<\/span>: number.\n      selectedStyle: <span class=\"hljs-built_in\">Object<\/span>,\n      <span class=\"hljs-attr\">slideStyle<\/span>:<span class=\"hljs-built_in\">Object<\/span>,\n      <span class=\"hljs-attr\">swipeMovementStarted<\/span>: <span class=\"hljs-built_in\">Boolean<\/span>,\n      <span class=\"hljs-attr\">swiping<\/span>: <span class=\"hljs-built_in\">Boolean<\/span>\n    }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><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>The essence of the <code>rotateAnimationHandler<\/code> function is to return an object that contains the three properties in the object above, whose values are set to <code>Object<\/code>. These properties are objects holding any CSS properties of our choice. The first is called <code>slideStyle<\/code>, and it contains the default styles each slide should have. <code>prevStyle<\/code> defines styles that the previously selected slide should have. Finally, the one called <code>selectedStyle<\/code> holds the styles for the active slide. Our <code>rotateAnimationHandler<\/code> function just defines styles that rotate each slide in and out of the page.<\/p>\n<p>By customizing the slider animations as we did, swiping the slider will no longer be supported on mobile. To avoid any weird issues, we also disabled swiping using the <code>swappable<\/code> prop and set it to <code>false<\/code>.<\/p>\n<p>Once again, refresh your browser to see the running application as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_DDEE26C258C91D73FC5E60F595B16E2592B8377364C55B8630B36D5C3EFC6347_1654594891681_CleanShot+2022-06-07+at+10.41.13.gif\" alt=\"GIF image of beach with react image carousel animation\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"264\"\/><\/p>\n<p>Find the complete project <a href=\"https:\/\/github.com\/ifeoma-imoh\/react-responsive-carousel-demo\">here<\/a> on GitHub.<\/p>\n<h2>Conclusion<\/h2>\n<p>Carousels are still one of the most popular design elements seen on the web. This guide shows us how to embed a responsive and customizable slider in our webPages. If you are looking to up your game with image carousels, check out how you can turn your carousel concepts into compelling, smooth user experiences that load with lightning speed and adapt in real-time with <a href=\"https:\/\/cloudinary.com\/products\/image\">Cloudinary<\/a> today.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":29522,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,246,249],"class_list":["post-27763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-react","tag-responsive"],"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>react-responsive-carousel | Add a Responsive Image Carousel to Your React App<\/title>\n<meta name=\"description\" content=\"Quick instructions on how to use the react-responsive-carousel package to add a responsive and customizable sliders and carousels to a react app.\" \/>\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\/add-a-responsive-image-carousel-to-your-react-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a Responsive Image Carousel to Your React App\" \/>\n<meta property=\"og:description\" content=\"Quick instructions on how to use the react-responsive-carousel package to add a responsive and customizable sliders and carousels to a react app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-12T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-15T19:37:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.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\/add-a-responsive-image-carousel-to-your-react-app#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Add a Responsive Image Carousel to Your React App\",\"datePublished\":\"2023-06-12T14:00:00+00:00\",\"dateModified\":\"2025-10-15T19:37:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"React\",\"Responsive\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app\",\"url\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app\",\"name\":\"react-responsive-carousel | Add a Responsive Image Carousel to Your React App\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA\",\"datePublished\":\"2023-06-12T14:00:00+00:00\",\"dateModified\":\"2025-10-15T19:37:11+00:00\",\"description\":\"Quick instructions on how to use the react-responsive-carousel package to add a responsive and customizable sliders and carousels to a react app.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing computer screens with react-responsive-carousel examples\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a Responsive Image Carousel to Your React App\"}]},{\"@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":"react-responsive-carousel | Add a Responsive Image Carousel to Your React App","description":"Quick instructions on how to use the react-responsive-carousel package to add a responsive and customizable sliders and carousels to a react app.","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\/add-a-responsive-image-carousel-to-your-react-app","og_locale":"en_US","og_type":"article","og_title":"Add a Responsive Image Carousel to Your React App","og_description":"Quick instructions on how to use the react-responsive-carousel package to add a responsive and customizable sliders and carousels to a react app.","og_url":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app","og_site_name":"Cloudinary Blog","article_published_time":"2023-06-12T14:00:00+00:00","article_modified_time":"2025-10-15T19:37:11+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.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\/add-a-responsive-image-carousel-to-your-react-app#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Add a Responsive Image Carousel to Your React App","datePublished":"2023-06-12T14:00:00+00:00","dateModified":"2025-10-15T19:37:11+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA","keywords":["Guest Post","Image","React","Responsive"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app","url":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app","name":"react-responsive-carousel | Add a Responsive Image Carousel to Your React App","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA","datePublished":"2023-06-12T14:00:00+00:00","dateModified":"2025-10-15T19:37:11+00:00","description":"Quick instructions on how to use the react-responsive-carousel package to add a responsive and customizable sliders and carousels to a react app.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing computer screens with react-responsive-carousel examples"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/add-a-responsive-image-carousel-to-your-react-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add a Responsive Image Carousel to Your React App"}]},{"@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\/v1682458232\/blog-responsive-carousel\/blog-responsive-carousel.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27763","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=27763"}],"version-history":[{"count":9,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27763\/revisions"}],"predecessor-version":[{"id":38779,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27763\/revisions\/38779"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/29522"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}