react-accmi-slider

Carousel with react

Carousel with react, mobile touch and desktop click.

Package Managers

npm i react-accmi-slider

Example

import 'react-accmi-slider/css/app.css';
import RAslider from 'react-accmi-slider';

  settings = {
    arrows: true,
    duration: 0.8,
    animation: 'ease',
    visibileItem: 1,
    arrowLeftClass: 'prev',
    arrowRightClass: 'next',
    offsetRight: 0,
    dots: true,
    beforeChange: (e) => console.log(e),
    infinity: false,
    typeChange: 'carousel',
    arrowLeftContent: <span className='asd'>prev</span>,
    arrowRightContent: <span className='asd'>next</span>
  };

  <RAslider {...this.settings}>
    <div className='item'><img src='./images/1.jpg' alt='' /></div>
    <div className='item'><img src='./images/2.jpg' alt='' /></div>
    <div className='item'><img src='./images/3.jpg' alt='' /></div>
    <div className='item'><img src='./images/1.jpg' alt='' /></div>
    <div className='item'><img src='./images/2.jpg' alt='' /></div>
    <div className='item'><img src='./images/1.jpg' alt='' /></div>
    <div className='item'><img src='./images/2.jpg' alt='' /></div>
    <div className='item'><img src='./images/3.jpg' alt='' /></div>
    <div className='item'><img src='./images/1.jpg' alt='' /></div>
    <div className='item'><img src='./images/2.jpg' alt='' /></div>
  </RAslider>

Settings

Option	Type	Default	Description
arrows	boolean	true	enable arrows
duration	number	0.8	transition-duration
animation	string	ease	animation-timing-function
visibileItem	number	1	count visible elements
arrowLeftClass	string	prev
arrowRightClass	string	next
arrowLeftContent	string	prev	content from arrow container
arrowRightContent	string	next	content from arrow container
offsetRight	number	0	padding-right in % for element
dots	boolean	true	enable dots (pagination)
beforeChange	void	()=>null	callback before sliding
infinity	boolean	false	infinity sliding

Methods

Method	Description
nextSlide
prevSlide
goToSlide(index)	index = number slide

Development

npm run dev

License

Copyright (c) 2018 Vjalov Mikhail

Licensed under the MIT license.