async-carousel v2.0.0

async-carousel

Async Carousel for React

React Carousel implementation with async content load. It is useful to create infinite content carousel. Any React content can be content It fetches next and prev elements only. When next or prev element shown, the one after that fetched asyncronously. It also support Promises.

Install

npm install --save async-carousel

Usage

Lets say we have list of image src within an array called images

with promise

<AsyncCarousel
  getContentPromise={this.getContentPromise}
  height={300}
  width={300}
/>

function getContentPromise(i) {
  return new Promise((resolve, reject) => {
    // Get modulo of images length (positive and negative indexes are possible)
    const len = images.length;
    let poss = i % len;
    if (poss < 0) {
      poss += len;
    }
    // get image src
    const src = images[poss];
    // create and return image component with resolve
    resolve(<img src={src} alt={i + "-" + poss} />);
  });
}

with sync function

<AsyncCarousel getContent={this.getContent} height={300} width={300} />

function getContent(i) {
  // Get modulo of images length (positive and negative indexes are possible)
  const len = images.length;
  let poss = i % len;
  if (poss < 0) {
    poss += len;
  }
  // Get image src
  const src = images[poss];
  // create and return image component
  return <img src={src} alt={i + "-" + poss} />;
}

with custom icons

<AsyncCarousel
  prevIcon={this.getPrevIcon()}
  nextIcon={this.getNextIcon()}
  getContentPromise={this.getContentPromise}
  height={300}
  width={300}
/>

getPrevIcon(){
  return <div className="customIcon"><FontAwesomeIcon icon={faCaretSquareLeft} /></div>
}
getNextIcon(){
  return <div className="customIcon"><FontAwesomeIcon icon={faCaretSquareRight} /></div>
}

Parameters

• getContent or getContentPromise should be supplied

License

MIT © ozgur-dogan