carousel-jvr-ts

Simple Carousel for React Apps

Installation

$ npm install carousel-jvr-ts

Usage

1. Import the carousel:

import Carousel from "carousel-jvr-ts";

2. Adding images:

   a) You can add images into your component directly:

   return (
     <Carousel>
       <div>
         <img src={urlImg1} alt="img 1" />
       </div>
       <div>
         <img src={urlImg2} alt="img 2" />
       </div>
       <div>
         <img src={urlImg3} alt="img 3" />
       </div>
     </Carousel>
   );

   b) Add then dynamically from a fetched API:

   <Carousel>
        {
            myImages.map((imageURLFromApi, index) => (
            <div key={imageURLFromApi}>
                <img
                src={imageURLFromApi}
                alt={`loaded from api ${index}`}
                loading="lazy"
                />
            </div>
            ));
        }
   </Carousel>

   c) Or both:

   <Carousel>
        <div>
             <img src={urlImg1} alt="img 1" />
       </div>
        {
            myImages.map((imageURLFromApi, index) => (
            <div key={imageURLFromApi}>
                <img
                src={imageURLFromApi}
                alt={`loaded from api ${index}`}
                loading="lazy"
                />
            </div>
            ));
        }
   </Carousel>

Notes:

• This library has been built from scratch using TypeScript.
• It contains unit, component and snapshot tests.
• At the moment it does not support extra features (such as autoplay).

---

Javier Valencia Romero, August 2021