How to Make Horizontal Scroll with Arrow in React Js?
I Have Created a Web App Which Shows the Cake Products on the Front Page. I Wrote Code in React and Every Thing Is Working Fine. Currently, My Application...
I have created a web App which shows the cake Products on the front page. I wrote code in React and every thing is working fine. Currently, my application looks something like this
The first 3 product(cake) are shown above and last 3 are shown below. Now, I need to those product in this way where item represents the image of the cake. How can this be done?
My JSX Code in React up to this is:-
import React from 'react'
import { Container } from 'semantic-ui-react';
const numberOfPicture = [1, 2, 3, 4, 5, 6];
const Product = () => {
return (
<Container>
<div className='ui three column grid' id="cakesProduct">
{numberOfPicture.map((picture, index) => (
<div className="column" key={index}>
<div className="ui fluid card">
<div className="image">
<img src={`assets/cakes/cake-${picture}.jpg`} />
</div>
</div>
</div>
))}
</div>
</Container >
);
}
export default Product
2 Answers
You haven't even tried to implement a slider in that given code snippet or sandbox.
Read the docs and see the sample code given to you by the npm package you mentioned :e react-horizontal-scrolling-menu.
Here's your component quickly written so you can copy-paste it into your codesandbox, you might want to rejig the styles and use your css, but this is a starting point with the arrows working:
const Product = () => {
return (
<ScrollMenu
arrowLeft={<div style={{ fontSize: "30px" }}>{" < "}</div>}
arrowRight={<div style={{ fontSize: "30px" }}>{" > "}</div>}
data={numberOfPicture.map((picture, index) => (
<img
style={{ height: "100px" }}
alt="test"
src=""
/>
))}
/>
);
};
I personally recommend you to use one of the following npm package.
Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.
