Angular Image Slider

     

Here is a example to create image or image with content slider in Angular. On this slider you can manage image rotating speed, how many image slide in a time and many more.
Step 1: Create new angular application to run given command

ng new imageSliderDemo

Step 2: Create new component for image slider to run given command under project

 ng g c slider

Step 3: For image slider install ng-image-slider to given command

 npm i ng-image-slider --save

Step 4: Import NgImageSliderModule in module.ts file.
NOTE:- If you are using angular 17 then go to component.ts file and add NgImageSliderModule in import section as per given screenshot.


Step 5: Go to slider.component.html file & copy paste given code

<div style="width: 1500px; height: 260px; text-align:left;margin:0; padding:0;">
      <ng-image-slider #nav
          [images]="imageObject"
          [infinite]=true
          [autoSlide]=1
          [imageSize]="{width: '25%', height: 200}"
          [slideImage]=2
          [animationSpeed]=5
          [showArrow]=true
          [lazyLoading]=true>
      </ng-image-slider>
</div>

NOTE:-

  • imageObject is the object array ex- [{ image: ‘../../assets/5.jpg’, thumbImage: ‘../../assets/5.jpg’, title: ‘Customize text on image’ }]
  • Auto Slide uses for slide will slide automatically if Infinate option is true
  • imageSize uses for declare with and heigh of the slider image
  • slideImage uses for slide number of image in a time(Ex- click on arrow button then move to number of images which is declare in slideImage
  • animationSpeed uses 1 sec to 5 sec
  • showArrow uses for show/arrow icon in slider
  • lazyLoading uses for loading coming images

Step 6: Go to slider.component.ts file & copy paste given code on this file.

imageObject = [{
                image: '../../assets/5.jpg',
                thumbImage: '../../assets/5.jpg',
                title: 'Customize text on image'
               }, {
                image: '../../assets/9.jpg',
                thumbImage: '../../assets/9.jpg'
               }, {
                image: '../../assets/4.jpg',
                thumbImage: '../../assets/4.jpg',
                title: 'Write on image'
               },{
                image: '../../assets/7.jpg',
                thumbImage: '../../assets/7.jpg',
                title: 'Customize text on image'
               }, {
                image: '../../assets/1.jpg',
                thumbImage: '../../assets/1.jpg'
               }, {
                image: '../../assets/2.jpg',
                thumbImage: '../../assets/2.jpg',
                title: 'Customize text on image'
               }];

Download Complete Code

That’s all.