<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useRef } = React;
// Create refs for each image element
// Function to handle the scroll action for a specific image
const scrollToImage = (index) => {
imageRefs[index].current.scrollIntoView({
block: 'center', // Change 'nearest' to 'center'
<div className='container'>
<h3>React Js Center Image in carousel onclick button</h3>
<div className="image-buttons">
<button className="image-button" onClick={() => scrollToImage(0)}>Image 1</button>
<button className="image-button" onClick={() => scrollToImage(1)}>Image 2</button>
<button className="image-button" onClick={() => scrollToImage(2)}>Image 3</button>
<button className="image-button" onClick={() => scrollToImage(3)}>Image 4</button>
<button className="image-button" onClick={() => scrollToImage(4)}>Image 5</button>
<div className="image-container">
<div ref={imageRefs[0]} className="image-wrapper">
src={encodeURI("https://www.sarkarinaukriexams.com/images/import/sne4446407201.png")}
<div ref={imageRefs[1]} className="image-wrapper">
src={encodeURI("https://www.sarkarinaukriexams.com/images/import/sne86811832.png")}
<div ref={imageRefs[2]} className="image-wrapper">
src={encodeURI("https://www.sarkarinaukriexams.com/images/import/sne10272423583.png")}
<div ref={imageRefs[3]} className="image-wrapper">
src={encodeURI("https://www.sarkarinaukriexams.com/images/import/sne1586776004.png")}
<div ref={imageRefs[4]} className="image-wrapper">
src={encodeURI("https://www.sarkarinaukriexams.com/images/import/sne20464172895.png")}
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Add padding to the left and right sides */