CODEWITHSUNDEEP
reactjstypescriptsemantic-ui
Biraz Dahal
Biraz Dahal

Reputation: 391

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 looks something like this enter image description here

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? enter image description here

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

Upvotes: 2

Views: 43741

Answers (2)

Muhammad Talha
Muhammad Talha

Reputation: 832

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

Upvotes: 1

Luke Storry
Luke Storry

Reputation: 6702

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"
        />
      ))}
    />
  );
};

Upvotes: 7

Related Questions