Home > Blockchain >  Does React/Material-UI library has image slider component itself?
Does React/Material-UI library has image slider component itself?

Time:04-25

I'm searching for image slider component in React/Material-UI library but i can't fine any slider component in it. please help me to find image slider component.

CodePudding user response:

i don't understand your question exactly but i hope this link help u:

https://mui.com/material-ui/react-slider/

or if u mean "carousel" Which is a sliders of pictures, this library will help u:

https://www.npmjs.com/package/react-material-ui-carousel

or u can find "carousel" in Material ui Library:

https://mui.com/material-ui/react-stepper/

or edit your post, or put a picture about what u want

CodePudding user response:

install the dependencies

"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1"

import the component and the styles

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const settings = {
   dots: true,
   infinite: true,
   speed: 500,
   slidesToShow: 1,
   slidesToScroll: 1,
   centerMode: true,
   variableWidth: true,
   swipeToSlide: true,
   edgeFriction: 0.15,
};

const App = () => {

 return (
      <Slider {...settings} >
          {[image1, image2, ...].map((image, i) => (
                <Image key={i}
                    id={image}
                    src={image}
                    alt="image" />
           ))}
        </Slider>
 )

http://kenwheeler.github.io/slick/

  • Related