npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-keshan-carousel

v1.10.9

Published

React image gallery, react slideshow carousel, react content rotator. It is actually `react-alice-carousel` with several patches

Downloads

55

Readme

React Keshan Carousel

demo gif

demo gif

React Keshan Carousel is a React component for building content galleries, content rotators and any React carousels. It is actually react-alice-carousel with several patches.

Features of react-keshan-carousel

  • Infinite loop
  • FadeOut animation
  • AutoPlay mode
  • Mobile friendly
  • Responsive design
  • Swipe to slide
  • Start index
  • Slide to index
  • RTL
  • Keyboard navigation
  • Touch and Drag support
  • Custom rendered slides
  • Custom animation duration
  • Multiple items in the slide
  • Show / hide anything (indicators, arrows, slides indexes)

How to use

npm install react-keshan-carousel --save-dev

Style import

# SCSS
@import "react-keshan-carousel/lib/keshan-carousel.scss";
# CSS
@import "react-keshan-carousel/lib/keshan-carousel.css";
# Webpack
import "react-keshan-carousel/lib/keshan-carousel.css";

Quick start

import React from 'react';
import KeshanCarousel from 'react-keshan-carousel';


const Gallery = () => (
  <KeshanCarousel>
    <img src="/img1" className="yours-custom-class" />
    <img src="/img2" className="yours-custom-class" />
    <img src="/img3" className="yours-custom-class" />
    <img src="/img4" className="yours-custom-class" />
    <img src="/img5" className="yours-custom-class" />
  </KeshanCarousel>
)

Advanced configuration

Props

  • items : Array, default [] - gallery items, preferable to use this property instead of children

  • duration : Number, default 250 - Duration of slides transition (milliseconds)

  • responsive : Object, default {} - Number of items in the slide

      {
          0: {
              items: 1
          },
          1024: {
              items: 3
          }
      }
  • buttonsDisabled : Boolean, false - Disable buttons control

  • dotsDisabled : Boolean, false - Disable dots navigation

  • startIndex : Number, 0 - The starting index of the carousel

  • slideToIndex : Number, 0 - Sets the carousel at the specified position

  • swipeDisabled : Boolean, default false - Disable swipe handlers

  • mouseDragEnabled : Boolean, default false - Enable mouse drag animation

  • infinite : Boolean, default true - Disable infinite mode

  • fadeOutAnimation : Boolean, false - Enable fadeout animation. Fired when 1 item is in the slide

  • keysControlDisabled : Boolean, default false - Disable keys controls (left, right, space)

  • playButtonEnabled : Boolean, default false - Disable play/pause button

  • autoPlay : Boolean, default false - Set auto play mode

  • autoPlayInterval : Number, default 250 - Interval of auto play animation (milliseconds). If specified, a larger value will be taken from comparing this property and the duration one

  • autoPlayDirection : String, default ltr - To run auto play in the left direction specify rtl value

  • autoPlayActionDisabled : Boolean, default false - If this property is identified as true auto play animation will be stopped after clicking user on any gallery button

  • stopAutoPlayOnHover : Boolean, default true - If this property is identified as false auto play animation won't stopped on hover

  • showSlideIndex : Boolean, default false - Show slide info

  • onSlideChange : Function - Fired when the event object is changing / returns event object

  • onSlideChanged : Function - Fired when the event object was changed / returns event object

    Both functions return next object

      {
          item: index,   // index of the item`s position
          slide: index   // index of the slide`s position
      }

Examples

import React from 'react';
import KeshanCarousel from 'react-keshan-carousel';


class Gallery extends React.Component {  
  responsive = {
    0: { items: 1 },
    600: { items: 2 },
    1024: { items: 3 },
  };

  onSlideChange(e) {
    console.log('Item`s position during a change: ', e.item);
    console.log('Slide`s position during a change: ', e.slide);
  };

  onSlideChanged(e) {
    console.log('Item`s position after changes: ', e.item);
    console.log('Slide`s position after changes: ', e.slide);
  };

  galleryItems() {
    return (
      [1, 2, 3, 4, 5].map((item, i) => (
        <div key={`key-${i}`} className="yours-custom-class"><h2>{item}</h2></div>
      ))
    )
  };

  render() {
    const items = this.galleryItems();

    return (
      <KeshanCarousel
        items={items}
        duration={400}
        autoPlay={true}
        startIndex = {1}
        fadeOutAnimation={true}
        mouseDragEnabled={true}
        playButtonEnabled={true}
        autoPlayInterval={2000}
        autoPlayDirection="rtl"
        responsive={this.responsive}
        autoPlayActionDisabled={true}
        onSlideChange={this.onSlideChange}
        onSlideChanged={this.onSlideChanged}
      />
    );
  }
}

Custom Prev / Next buttons, dots / thumbs navigation:

import React from 'react';
import KeshanCarousel from 'react-keshan-carousel';


class Gallery extends React.Component {  
  items = [1, 2, 3, 4, 5];

  galleryItem = (item, i) => (
    <div key={`key-${i}`} className="yours-custom-class"><h2>{item}</h2></div>
  )

  thumbItem = (item, i) => (
    <li key={i} onClick={() => this.Carousel._onDotClick(i)}>Thumb {item}</li>
  )

  render() {
    const items = this.items.map(this.galleryItem)

    return (
      <div>
        <h3>Navigation</h3>
        <ul>{this.items.map(this.thumbItem)}</ul>
        <button onClick={() => this.Carousel._slidePrev()}>Prev button</button>
        <button onClick={() => this.Carousel._slideNext()}>Next button</button>
        <h3>React Keshan Carousel</h3>

        <KeshanCarousel
          items={items}
          dotsDisabled={true}
          buttonsDisabled={true}
          ref={ el => this.Carousel = el }
        />
      </div>
    );
  }
}
import React from 'react';
import KeshanCarousel from 'react-keshan-carousel';


class Gallery extends React.Component {
  items = [1, 2, 3, 4, 5];
  state = {
    currentIndex: 0,
    responsive: { 1024: { items: 3 }},
    items: this.items.map(this.galleryItem),
  };

  slideTo = (i) => this.setState({ currentIndex: i });

  onSlideChanged = (e) => this.setState({ currentIndex: e.item });

  slideNext = () => this.setState({ currentIndex: this.state.currentIndex + 1 });

  slidePrev = () => this.setState({ currentIndex: this.state.currentIndex - 1 });

  thumbItem = (item, i) => (
    <li key={`key-${i}`} onClick={() => this.slideTo(i)}>Thumb {item}</li>
  );

  galleryItem = (item, i) => (
    <div key={`key-${i}`} className="yours-custom-class"><h2>{item}</h2></div>
  );

  render() {
    const { items, responsive, currentIndex } = this.state
    return (
      <div>
        <h3>Navigation</h3>
        <ul>{this.items.map(this.thumbItem)}</ul>
        <button onClick={() => this.slidePrev()}>Prev button</button>
        <button onClick={() => this.slideNext()}>Next button</button>
        <h3>React Keshan Carousel</h3>

        <KeshanCarousel
          items={items}
          dotsDisabled={true}
          buttonsDisabled={true}
          responsive={responsive}
          slideToIndex={currentIndex}
          onSlideChanged={this.onSlideChanged}
        />
      </div>
    );
  }
}

Build the project locally

Clone

git clone https://github.com/keshan3262/react-keshan-carousel
cd react-keshan-carousel

Run

npm i
npm start

License

MIT