React Carousel Slider Component

Table of Contents

• Installation
• Features
• Props
• Examples

Installation

First install the module via npm:

npm install react-carousel-slider-component

Then import the module:

import React from 'react';
import { Carousel } from 'react-carousel-slider-component';

function App() {
    return (
        <Carousel>
        </Carousel>
    )
}

Features

Images / Divs / Videos

• If you only want to display images, they can pass an array through the slides prop.
• Users can also choose a href and a href target

    [
        {
            src: 'cargoships.jpeg',
            alt: 'A picture of cargoships',
            href: 'https://github.com',
            href_target: '_blank',
        },
    ]

• If you want to display divs, video and images at the same time, you must pass them as children under the Carousel component.

        <Carousel 
            totalSlides={5}
            indicators={true}
            indicatorType={'number'}
            infinite={false}
        >
            <video height= "500px" controls={true}>
              <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"></source>
            </video>
            <div>
              <h1>Hello</h1>
              <p>This is a test</p>
            </div>
            <img src= 'mountain.jpeg' 
                alt= 'A picture of a mountain'>
            </img>
        </Carousel>

Autoplay

• Option to automatically play the slides of the carousel.
• You can manually set the duration of each slide.

Page Indicators

• Option to turn on and off page indicators for the carousel, displayed at the bottom.
• You can change the style from either bullet points or numbered indicators
• You can use custom CSS to style the indicators

Multi Sides

• You can set the number of slides showing on each page
• You can set the number of slides each step moves

Infinite scrolling

• You can toggle if the slides scrolling goes indefinitely

Props

Name	Type	Required	Description	Default
Slides	Array	Optional	Images for the carousel. The array should be composed of {src: "..", alt: ".."} elements.
totalSlides	Number	Required	The total number of slides
indicator	Boolean	Optional	Option to show slide indicators or not	False
indicatorType	String	Optional	Either 'circle' or 'number' indicator style	'circle'
indicatorStyle	React.CSSProperties	Optional	CSS object for indicators
arrowStyle	React.CSSProperties	Optional	CSS object for arrows
startIndex	Number	Optional	index the slide starts on	0
autoplay	Boolean	Optional	Autoplay slides	False
autoplayDuration	Number	Optional	The duration of each slide in seconds	2
infinite	Boolean	Optional	Infinity cycles through the carousel slides	True
slidesToShow	Number	Optional	How many images each slide shows	1
slidesToScroll	Number	Optional	How many slides is scrolled on each scroll	1

Examples

Slider using Props

import React from 'react';
import './App.scss';
import Carousel from './components/Carousel/Carousel';
function App() {
    const slides = [
        {
        src: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        alt: 'landscape',
        href: 'https://unsplash.com/@joshua_kim',
        href_target: '_blank',
        },
        {
        src: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2070&q=80',
        alt: 'A picture of a cat',
        href: 'https://unsplash.com/@joshua_kim',
        href_target: '_blank',
        }
    ];
    return (
        <div  style={{textAlign: 'center'}}>
        <h1>React Carousel Component</h1>
        <div style={{width: '100%', height: '600px', margin: 'auto'}}>
            <Carousel 
                slides={slides}
                totalSlides={2}
                indicators={false}
                indicatorType={'number'}
                slidesToShow={1}
                slidesToScroll={1}
            >
            </Carousel>
            </div>
        </div>
    );
    export default App;
    }

Slides using component children

    import React from 'react';
    import './App.scss';
    import Carousel from './components/Carousel/Carousel';
    function App() {
        return (
            <div  style={{textAlign: 'center'}}>
            <h1>React Carousel Component</h1>
            <div style={{width: '100%', height: '600px', margin: 'auto'}}>
                <Carousel 
                    totalSlides={3}
                    indicatorType={'number'}
                    slidesToShow={1}
                    slidesToScroll={1}
                    autoplay={true}
                    autoplayDuration={2}
                    pauseOnHover={true}
                    infinite={true}
                >
                    <video height= "500px" width="" controls={true}>
                    <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"></source>
                    </video>
                    <div>
                    <h1>Hello</h1>
                    <p>This is a test</p>
                    </div>
                    <img src= 'https://images.unsplash.com/photo-1461301214746-1e109215d6d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80' 
                    alt= 'A picture of a mountain'></img>
                </Carousel>
                </div>
            </div>
        );
    export default App;
    }