react-accmi-slider v0.0.2

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

Methods

Development

npm run dev

License

Copyright (c) 2018 Vjalov Mikhail

Licensed under the MIT license.