Skip to content

A highly optimized and fully customizable pure angular standalone component and solution for horizontal scrolling images with lazy loading.

Notifications You must be signed in to change notification settings

malikrajat/rm-carousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

RmCarousel for Angular

A highly optimized and fully customizable pure angular standalone component and solution for horizontal scrolling images with lazy loading.

Installation

Install the npm package.

  npm: npm i rm-carousel
  yarn: yarn add rm-carousel

Import in component:

 import { RmCarouselComponent, ISlides } from 'rm-carousel';

  @Component({
      imports: [RmCarouselComponent]
  })

Sample

Then use in your component:

<rm-carousel [indicatorsVisible]="false" [animationSpeed]="100" [slides]="slides" [autoPlay]="true" [autoPlaySpeed]="4000"> </rm-carousel>

Or prepare an image array for the carousel. If necessary, specify in the settings the sizes of the cells and the carousel container. And also select the method of arranging images inside the cells using the objectFit property.

<rm-carousel [slides]="slides"> </rm-carousel>
 slides: ISlides[] = [
    {
      url: '/assets/images/image1.avif',
      title: 'First slide',
      description: 'This is the first slide',
    },
    {
      url: '/assets/images/image2.avif',
      title: 'Second slide',
      description: 'This is the second slide',
    },
    {
      url: '/assets/images/image3.avif',
      title: 'Third slide',
      description: 'This is the third slide',
    },
    {
      url: '/assets/images/image4.avif',
      title: 'Fourth slide',
      description: 'This is the fourth slide',
    },
    {
      url: '/assets/images/image5.avif',
      title: 'Fifth slide',
      description: 'This is the fifth slide',
    },
  ];

Lazy loading

To use lazy loading, pass the carousel an array of images, as shown in the example above. Images will be uploaded only as needed, this will save you traffic. Using the overflowCellsLimit property.

Version Mapping

Slider Ng
0.0.x 17.x
2.x.x 18.x

Properties

name type default description
indicatorsVisible boolean true Display circle at bottom of Carousel to go back and forth
autoPlay boolean true When true Carousel will start automatically
autoPlaySpeed number 3000 Speed of images to change in slider
animationSpeed number 500 Speed of a images to change in slider
slides ISlides [] It is an array of images and property that we pass to RmCarousel

Author services

Are you interested in this library but lacks features? Write to the author, he can do it for you.

Roadmap

fade - fade in and fade out animation.

About

A highly optimized and fully customizable pure angular standalone component and solution for horizontal scrolling images with lazy loading.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published