Reactousel is a simple carousel for React and the web.
- Importing styles from
reactousel/dist/index.cssis expected to result in an error since all styles have now been converted to JSS.
import {Carousel, Slide} from 'reactousel'
// reactousel/dist/index.css no longer exists- The carousel theme can now be customized by importing createCarouselTheme instead of the old way of passing primaryColor and secondaryColor props to Carousel. Using the old way is expected to fail. See Theming below.
- Install with npm
$ npm install reactousel- Install with yarn
$ yarn add reactousel- Download JS & CSS files (use in the head tag)
<html>
<head>
<link rel='stylesheet' href='./reactousel.css'>
<script src='./reactousel.js'>
</head>
<body>
<!-- body content -->
</body>
</html>- Import the carousel and slide components like below:
// Import React
import React from 'react'
// Import Carousel and Slide like this
import {Carousel, Slide} from 'reactousel'
// Only import index.css in versions below 1.1.0.
// In versions above 1.1.0, it is expected to cause an error.
import 'reactousel/dist/index.css'- Example with a functional component:
//Import React
import React from 'react'
// Import Carousel and Slide components
import {Carousel, Slide} from 'reactousel'
// Only import index.css in versions below 1.1.0.
// In versions above 1.1.0, it is expected to cause an error.
import 'reactousel/dist/index.css'
// App component
function App() {
return (
<Carousel name='test-carousel'>
<Slide>My first slide</Slide>
</Carousel>
)
}- Example with a class component:
//Import React
import React from 'react'
// Import Carousel and Slide components
import {Carousel, Slide} from 'reactousel'
// Import styles
import 'reactousel/dist/index.css'
// App component
class App extends React.Component {
render() {
return (
<Carousel name='test-carousel'>
<Slide>My first slide</Slide>
</Carousel>
)
}
}name, controlsStyle, controlsPrevious, controlsNext, noIndicators, noControls, indicatorsStyle, delay, spacing, height, children
primaryColor, secondaryColor have however, been removed starting from version 1.1.0
-
name
desired unique name of the carousel (required). -
controlsStyle
styles of the previous and next buttons. -
controlsPrevious
replace default previous control with your own. -
controlsNext
replace default next control with your own. -
noIndicators
removes slide indicators. -
noControls
removes carousel controls. -
indicatorStyle
styles of the indicators. -
delay
delays transition time of each slide. -
spacing
spacing within carousel. -
height
height of carousel. -
primaryColor(removed in version 1.1.0, see Theming below)
color of controls.// Example primaryColor={{ main: '#000', contrast: '#fff' }}
-
secondaryColor(removed in version 1.1.0, see Theming below)
color of indicators.// Example secondaryColor={{ main: '#ffa000' }}
-
children
<Slide>elements only. Any other element will display a fallback slide whilst anything else will show "No slides".
children
-
children
any element or text.
As of versions 1.1.0 and above, customizing the theme for the controls and indicators could be done via createCarouselTheme.
- Example with a class component
// Import React as usual
import React from 'react'
// Import createCarouselTheme in addition to Carousel and Slide
import {Carousel, Slide, createCarouselTheme} from 'reactousel'
// You can use HEX or RGB or normal color values
const customTheme = createCarouselTheme({
// theme for control buttons
controls: {
colorPrimary: '#0000ff', // blue
colorSecondary: '#ffffff' // white
},
// theme for indicators
indicators: {
colorPrimary: '#000000', //black
colorSecondary: '#ffa000' // amber
}
})
// App component
class App extends React.Component {
render() {
return (
// Pass customTheme value to theme prop of Carousel component
<Carousel name='test-carousel' theme={customTheme}>
<Slide>My first slide</Slide>
</Carousel>
)
}
}-
Clone the project
$ git clone https://github.com/Elkanah-me/reactousel.git
-
Install dependencies
npm installoryarn install -
Start
npm run startoryarn run start -
Build
npm run buildoryarn run build -
Install dependencies for example
cd example && npm installorcd example && yarn install -
Run in browser
cd example && npm run startorcd example && yarn run start -
Build example
cd example && npm run buildorcd example && yarn run build
- An example in HTML
<html>
<head>
<!-- Other Styles -->
<link rel="stylesheet" href="./reactousel.css" />
<script src="./reactousel.js"></script>
</head>
<body>
<div class="carousel-wrapper" style="width: 800px;">
<div class="carousel">
<div class="carousel-control-box prev">
<button id="prev-btn" class="carousel-control prev">
Left Button
</button>
</div>
<div id="test" class="carousel">
<div class="carousel-item">
1
</div>
<div class=" carousel-item">
2
</div>
<div class="carousel-item">
3
</div>
</div>
<div class="carousel-control-box next">
<button id="next-btn" class="carousel-control next">
Right Button
</button>
</div>
</div>
<div class="slide-indicators"></div>
</div>
<script>
// Slides container
const box1 = document.getElementById('test')
// Control for previous slide
const controlsPrev1 = document.getElementById('prev-btn')
// Control for next slide
const controlsNext1 = document.getElementById('next-btn')
// Slides
const slides1 = box1.querySelectorAll('.carousel-item')
const carouselWrapper = box1.parentElement.parentElement
// Indicators box
const indicatorsBox1 = carouselWrapper.querySelector('.slide-indicators')
createCarousel(box1, controlsPrev1, controlsNext1, slides1, indicatorsBox1)
</script>
</body>
</html>Checkout the demos on Reactousel's website. You may download the JS & CSS files to use in your raw HTML, CSS, JS projects.
MIT © Elkanah-me