rm-image-slider 17.3.0 → 18.1.5

package/README.md

@@ -1,7 +1,18 @@
+<a href="https://github.com/malikrajat/rm-image-slider">
+
+  <h1 align="center">Image Slider/ carousel</h1>
+
+<p align="center">Advanced, customizable, Optimized ,Minimal, light-weight and fully customizable pure angular component for carousel.</p>
+
+</a>
+[![npm](https://img.shields.io/npm/v/ngx-bar-rating.svg)](https://www.npmjs.com/package/rm-image-slider)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/malikrajat/rm-image-slider)
+
+__
 # Angular Image Slider with Lightbox
 
 An Angular responsive image slider with lightbox popup.
-Also support youtube and mp4 video urls.
+Also support youtube and mp4 video urls. It is leazy loading and heigly optimized with standalone component.
 
 (Compatible with Angular Version: 17)
 
@@ -17,14 +28,22 @@ Also support youtube and mp4 video urls.
 
 # Installation
 
-`npm install rm-image-slider --save`
+Install rm-image-slider with npm amd yarn
+
+```bash
+
+  npm: npm install rm-image-slider--save 
+
+  yarn: yarn add rm-image-slider
+
+```
 
 # Setup :
 
 **Import module in your component:**
 
 ```typescript
-import { RmImageSliderComponent } from 'rm-image-slider';
+import { RmImageSliderComponent, ImageObject } from 'rm-image-slider';
 ...
 @Component({
   selector: '',
@@ -45,17 +64,19 @@ import { RmImageSliderComponent } from 'rm-image-slider';
 **ImageObject format**
 
 ```js
-imageObject: Array<object> = [{
+imageObject: Array<ImageObject> = [{
         image: 'assets/img/slider/1.jpg',
         thumbImage: 'assets/img/slider/1_min.jpeg',
         alt: 'alt of image',
-        title: 'title of image'
+        title: 'title of image',
+        index: 1
     }, {
         image: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image
         thumbImage: '.../iOe/xHHf4nf8AE75h3j1x64ZmZ//Z==', // Support base64 image
         title: 'Image title', //Optional: You can use this key if want to show image with title
         alt: 'Image alt', //Optional: You can use this key if want to show image with alt
-        order: 1 //Optional: if you pass this key then slider images will be arrange according @input: slideOrderType
+        order: 1, //Optional: if you pass this key then slider images will be arrange according @input: slideOrderType
+        index: 2
     }
 ];
 ```
@@ -63,21 +84,25 @@ imageObject: Array<object> = [{
 **Image, Youtube and MP4 url's object format**
 
 ```js
-imageObject: Array<object> = [{
+imageObject: Array<ImageObject> = [{
        video: 'https://youtu.be/....' // Youtube url
+        index: 1
    },
 	{
 		video: 'assets/video/********.mp4', // MP4 Video url
+    index: 2
 	},
 	{
-		video: 'assets/video/movie2.mp4',
-       posterImage: 'assets/img/slider/2_min.jpeg', //Optional: You can use this key if you want to show video poster image in slider
-       title: 'Image title'
+		video: 'assets/video/movie2.mp4', 
+    posterImage: 'assets/img/slider/2_min.jpeg', //Optional: You can use this key if you want to show video poster image in slider
+    title: 'Image title',
+    index: 3
    },
 	{
 		image: 'assets/img/slider/1.jpg',
-       thumbImage: 'assets/img/slider/1_min.jpeg',
-       alt: 'Image alt'
+    thumbImage: 'assets/img/slider/1_min.jpeg',
+    alt: 'Image alt',
+    index: 4
 	}
    ...
 ];
@@ -114,6 +139,8 @@ import { RmImageSliderComponent } from 'rm-image-slider';
 
 @Component({
     selector: 'sample',
+     standalone: true,
+     imports: [RmImageSliderComponent],
         template:`
         <rm-image-slider [images]="imageObject" #nav>
         </rm-image-slider>
@@ -134,3 +161,26 @@ class Sample {
     }
 }
 ```
+<a name="issues"/>
+
+## Issues
+
+If you identify any errors in this component, or have an idea for an improvement, please open
+an [issue](https://github.com/malikrajat/rm-image-slider/issues). I am excited to see what the community thinks of this
+project, and I would love your input!
+
+## Author services
+
+Are you interested in this library but lacks features? Write to the author, he can do it for you.
+
+## Credits
+
+The library is inspired by one other library.
+
+
+<a name="author"/>
+
+## Author
+
+**Rajat Malik**
+- [github/malikrajat](https://github.com/malikrajat)

package/esm2022/lib/interface.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvcm0taW1hZ2Utc2xpZGVyL3NyYy9saWIvaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIEltYWdlT2JqZWN0IHtcclxuICBpbWFnZT86IHN0cmluZztcclxuICB0aHVtYkltYWdlPzogc3RyaW5nO1xyXG4gIGFsdD86IHN0cmluZztcclxuICB0aXRsZT86IHN0cmluZztcclxuICBvcmRlcj86IG51bWJlcjtcclxuICBpbmRleDogbnVtYmVyO1xyXG4gIHBvc3RlckltYWdlPzogc3RyaW5nO1xyXG4gIHZpZGVvPzogc3RyaW5nO1xyXG59XHJcbiJdfQ==