Do you want to create Automatic Image Slider using React JS?
In this article you will know how to Auto-Playing Slideshow with React. Earlier I have shared with you many types of automatic image slider tutorials using JavaScript. Not only that but only HTML and css, I have created many automatic image sliders in this tutorial.
12+ CSS Image Hover Effects (Free Code + Demo)
Image Slider are the carousel that helps in displaying multiple images all at one place with a small interval between all the images. This Auto playing slideshow with React is an advance project in which we will be using Javascript framework react for creating a unique image slide with automatic sliding feature.
Now it’s time to create automatic image slides with React. Earlier I shared a manual image slider tutorial by React.
But if you want to build Auto-Play Slideshow React then you have come to the right place. Here you will find necessary explanation and source code.
Automatic Image Slider in React JS
React JS is a popular JavaScript library for building user interfaces, and one of its common use cases is creating image sliders.
An automatic image slider is a great way to display multiple images on a website without taking up too much space. In this article, we will show you how to create an automatic image slider in React JS.
An automatic image slider is a great way to display multiple images on a website without taking up too much space. In this article, we will show you how to create an automatic image slider in React JS.
See the Pen Auto-Play Slideshow React by Ground Tutorial (@groundtutorial) on CodePen.
As you can see above it is a simple react auto slider with 3 images. Here I have not used any image. Instead I added a background color.
If you want you can add images, I will explain below in the React code how to do it. Then there is the carousel below. I used 3 carousels for three images.
How to Build an Auto-Playing Slideshow with React
Now it’s time to create this React JS automatic image slider. Here I have given you all the codes and they have published them. If you want to create a manual image slider you can see my other article.
If you just want the source code of this Auto-Play Slideshow React then you can click the download button below the article.
If you want to create a React app for the first time then you can know how to start using this link. In that article I have seen how to start a React project.
Step 1: HTML of react auto slider
The following codes are the html code of this react JS carousel auto slider. If you know Basic React then you won’t have any problem.
<!DOCTYPE html>
<html lang="en" >
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="App"></div> <script type="litespeed/javascript" data-src='https://unpkg.com/react/umd/react.development.js'></script> <script type="litespeed/javascript" data-src='https://unpkg.com/react-dom/umd/react-dom.development.js'></script><script type="litespeed/javascript" data-src="./script.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://foolishdeveloper.com/wp-content/litespeed/js/f21cbb88936c42dc19773a8407b9c20a.js?ver=519e0"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
Step 2: CSS Code for React Auto-Play Slideshow
Now we need to design this react image slider autoplay by css. The css used here is very simple. You can understand very easily.
/* Slideshow */
.slideshow {
margin: 0 auto;
overflow: hidden;
max-width: 500px;
}
.slideshowSlider {
white-space: nowrap;
transition: ease 1000ms;
}
.slide {
display: inline-block;
height: 400px;
width: 100%;
border-radius: 40px;
}
/* Buttons */
.slideshowDots {
text-align: center;
}
.slideshowDot {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
margin: 15px 7px 0px;
background-color: #c4c4c4;
}
.slideshowDot.active {
background-color: #6a0dad;
}
Step 3: Enable Automatic Image Slider with React JS
Now it’s time to activate react-automatic slider. Here I have given the necessary explanation. Hope you will not have any difficulty in understanding.
const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 2500;
This code defines two constants:
colors: an array of strings representing hex color codes.delay: a constant number representing the delay time in milliseconds before switching to the next slide.
colors will be used to set the background color of each slide, and delay is used to set the time interval between transitioning to the next slide.
function Slideshow() {
const [index, setIndex] = React.useState(0);
const timeoutRef = React.useRef(null);
function resetTimeout() {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
}
This is a function that creates a React component called “Slideshow”. Inside the function, it uses the “useState” Hook to create a state variable called “index” with an initial value of 0, and a state updater function called “setIndex”. It also uses the “useRef” Hook to create a reference called “timeoutRef” with an initial value of null.
It also contains a function called “resetTimeout” which checks if the “timeoutRef” current value is not null, if it is not null, it clears the timeout using the “clearTimeout” function. This function will be used to clear any previously set timeouts, so that only one timeout is active at a time.
React.useEffect(() => {
resetTimeout();
timeoutRef.current = setTimeout(
() =>
setIndex((prevIndex) =>
prevIndex === colors.length - 1 ? 0 : prevIndex + 1),
delay);
return () => {
resetTimeout();
};
}, [index]);
This is a React Hook that uses the “useEffect” Hook to run some code when the component is rendered or when the “index” state variable changes. It sets up a timeout that calls a function to increment the “index” state variable to the next slide after a certain delay, which is passed in as the “delay” prop.
The function that increments the “index” state variable checks if the current index is the last index of the “colors” array, if it is then it sets the “index” to 0, otherwise it increments it by 1.
Simple Image Hover Effects in HTML & CSS
It also calls a “resetTimeout” function, which clears the timeout using the “timeoutRef” reference, and returns another function that also calls the “resetTimeout” function. This return function will run when the component unmounts or when the “index” state variable changes, effectively clearing the previous timeout so that only one timeout is active at a time.
return /*#__PURE__*/(
React.createElement("div", { className: "slideshow" }, /*#__PURE__*/
React.createElement("div", {
className: "slideshowSlider",
style: { transform: `translate3d(${-index * 100}%, 0, 0)` } },
colors.map((backgroundColor, index) => /*#__PURE__*/
React.createElement("div", {
className: "slide",
key: index,
style: { backgroundColor } }))), /*#__PURE__*/
React.createElement("div", { className: "slideshowDots" },
colors.map((_, idx) => /*#__PURE__*/
React.createElement("div", {
key: idx,
className: `slideshowDot${index === idx ? " active" : ""}`,
onClick: () => {
setIndex(idx);
} })))));
}
This is a function that returns a JSX element that creates a slideshow using React. The JSX element consists of a parent “div” element with a class of “slideshow”. Within that element, there is another “div” element with a class of “slideshowSlider”, which has a “transform” style that updates the position of the slides based on the value of the “index” variable.
The “slideshowSlider” element also contains a “map” function that creates a new “div” element for each color in the “colors” array, with the background color set to the color in the array. Each slide “div” element also receives a class name “slide” and the key is set to the current index.
Outside of the “slideshowSlider” element, there is another “div” element with a class of “slideshowDots”, which also uses a “map” function to create a new “div” element for each color in the “colors” array. Each dot “div” element has a class of “slideshowDot” and an “onClick” function that sets the “index” to the current index when clicked. The dot also receives an additional class of “active” if the current index matches the index of the dot.
ReactDOM.render( /*#__PURE__*/React.createElement(Slideshow, null), document.getElementById("App"));
This line of code is using ReactDOM’s render method to render the react auto Slideshow component to the element with an ID of “App” in the HTML document. The first argument passed to the render method is the JSX element representing the Slideshow component, which is being created using the React.createElement method.
The second argument is the target DOM node, which is the element with an ID of “App” in this case. The render method will replace the contents of the target DOM node with the JSX element passed to it.
This line of code is the final step of the code and it is what makes the slideshow visible on the website. It’s also worth noting that the code is using a JSX syntax feature, /#PURE/ , which is an indication for the JSX transform to include or exclude this element.
Hope you have learned from this article how to create Automatic Image Slider using React js. If there is any difficulty in creating this Auto-Play Slideshow React, you can comment me.
See the Pen Auto-Play Slideshow React by Omar Benseddik (@bnsddk) on CodePen.
An automatic image slider in React JS can be created by using a combination of state, hooks and JSX elements. Here is an example of a basic automatic image slider in React:
import React, { useState, useEffect } from ‘react’;
function ImageSlider() {
// Create state variables for the index and image array
const [index, setIndex] = useState(0);
const images = [‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’];
// Use useEffect to increment the index and update the image every 5 seconds
useEffect(() => {
const intervalId = setInterval(() => {
setIndex(prevIndex => (prevIndex + 1) % images.length);
}, 5000);
return () => clearInterval(intervalId);
}, []);
// Render the current image
return (
<img src={images[index]} alt=”Slider” />
);
}
export default ImageSlider;
Here are the steps to create an automatic image slider in React JS:
Create a new React component for the slider.
Use the
useStatehook to create state variables for the index and image array.Use the
useEffecthook to set up a function that increments the index and updates the displayed image at a specified time interval.Use JSX to render the current image.
Style the component to make it look more presentable.
Import the component in the parent component and render it.
Test the component by running the app and checking that the images are transitioning at the desired interval.
Make any necessary adjustments, such as changing the time interval, adding or removing images, or making changes to the styling.
Here are the steps to create a carousel slider in React JS:
Create a new React component for the carousel.
Use the
useStatehook to create state variables for the current slide index and the number of slides.Use the
useEffecthook to create a function that updates the current slide index based on a specified time interval.Use JSX to render the carousel slides.
Use CSS to style the carousel.
Add navigation buttons to the carousel, such as “previous” and “next” buttons, that allow the user to manually change the current slide.
Import the component in the parent component and render it.
Test the component by running the app and checking that the slides are transitioning at the desired interval and that the navigation buttons work as expected.
Make any necessary adjustments, such as changing the time interval, adding or removing slides, or making changes to the styling.
