Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-accmi-slider

accmi7MIT License0.0.2TypeScript support: included

slider react carousel swipe touch

react, slider, carousel, swipe-slider, carousel-list

readme

react-accmi-slider

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>

GitHub Logo

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.