How to make Horizontal Scroll with arrow in React JS?

Question

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

what did you try till now? Because i don't see any code related to this slider. — Asking
– Asking, Commented Jul 20, 2020 at 17:15
I installed this package npm install --save react-horizontal-scrolling-menu It was scrolling page. I want only the product to be scrolled and also there was no arrow there. — Biraz Dahal
– Biraz Dahal, Commented Jul 20, 2020 at 17:19
will be easier to help you if will provide a demo like codesanbox or something like this. — Asking
– Asking, Commented Jul 20, 2020 at 17:20
codesandbox.io/s/admiring-carson-09e7l?file=/src/App.js For my Application here is the running code in codesanbox — Biraz Dahal
– Biraz Dahal, Commented Jul 20, 2020 at 17:37

Luke Storry · Accepted Answer · 2020-07-20 20:04:31Z

7

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="https://reactjs.org/logo-og.png"
        />
      ))}
    />
  );
};

answered Jul 20, 2020 at 20:04

Luke Storry

6,7821 gold badge11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Talha · Accepted Answer · 2022-01-25 19:53:48Z

1

I personally recommend you to use one of the following npm package.

https://www.npmjs.com/package/react-horizontal-scrolling-menu

https://www.npmjs.com/package/react-scroll-horizontal

https://www.npmjs.com/package/react-horizontal-scrolling

https://www.npmjs.com/package/react-horizontal-scroll-menu

answered Jan 25, 2022 at 19:53

Muhammad Talha

8521 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to make Horizontal Scroll with arrow in React JS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related