react-carousel-sw49go v0.1.3

Carousel React components created using create-react-app by SW49GO

Presentation :

This is a reusable React component that allows you to display a customizable Carousel in your application.

The component is TypeScript compatible and includes a type definition file (CarouselReact.d.ts) for an improved development experience. In a TypeScript project, the TypeScript compiler will automatically use this definition file.

Examples Custom style :

Installing the package in your project:

npm i react-carousel-sw49go

Prerequisites :

• Node.js v18.16.0

Dependencies to install :

• "react": "^18.2.0"
• "react-dom": "^18.2.0"
• "prop-types": "^15.8.1"
• "react-icons": "^5.0.1"

Imported the component into your project:

import {CarouselReact } from 'react-carousel-sw49go'

function App() {
    // Resource list in an array:
        const pictures =  [
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-1.jpg",
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-2.jpg",
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-3.jpg",
            "https://s3-eu-west-1.amazonaws.com/course.oc-static.com/projects/front-end-kasa-project/accommodation-20-4.jpg"
        ]

  return (
    <div className='yourStyleContainer'>
      <CarouselReact 
            photo={pictures} 
            outside={true} 
            heightContainer={'10rem'} 
            widthContainer={'85%'} 
            styleContainer={{border:'3px solid #000', paddingBottom:'1rem', backgroundColor:'#5f99dc'}} 
            styleNavIcon={{color:'#fff', fontSize:'1rem'}} 
            stylePaging={{color:'#fff'}}  
            reactIconRight={'FaArrowAltCircleRight'} 
            reactIconLeft={'FaArrowAltCircleLeft'}/>
    </div>
  )
}

export default App

Using the different component options (Props):