In this article, we will learn how to build a responsive carousel slider in Angular 9.
The Carousel plugin is a component for cycling through elements, like a slideshow.
Create a new Angular project by typing the following command in the VSCode terminal.
ng new carousel
Now, open the newly created project and execute the command given below.
npm install ngx-owl-carousel owl.carousel jquery
It will install 3 different packages:
Now, we have to reference all packages path in the angular.json file.
Note: Make sure you reference it under the build node.
"styles": [ "src/styles.css", "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css", "./node_modules/owl.carousel/dist/assets/owl.theme.default.min.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/owl.carousel/dist/owl.carousel.min.js" ]
Open the app.module.ts file and add the code in it.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { OwlModule } from 'ngx-owl-carousel'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, OwlModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Open the app.component.ts file and add the code in it.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { slideOptions = { nav: true, dots: true, loop: false, margin: 10, responsiveClass: true, // responsive object contains responsive options. responsive: { 0: { items: 1, dots: false }, 600: { items: 3 }, 1000: { items: 4 } } }; images = [ 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGpg4fYucfTrzefpz53O7sG3TMm76s8FkNnoc0kViB0bOflsO8&s', 'https://img.freepik.com/free-photo/macro-picture-half-soap-bubble-look-like-planet-space_58717-343.jpg?size=626&ext=jpg', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYgtlo6yCU3PuboMjxF1n5eQ2SXch8htElZEwaB9dN0AGiA-Vm&s', 'https://wallpaperaccess.com/full/1622642.jpg', 'https://wallpapers.moviemania.io/phone/movie/299534/89d58e/avengers-endgame-phone-wallpaper.jpg?w=1536&h=2732', 'https://wonderfulengineering.com/wp-content/uploads/2016/02/wallpaper-background-2.jpg', 'https://cutewallpaper.org/21/wallpaper-images-hd/Nature-Wallpapers-Pexels-Free-Stock-Photos.jpeg' ]; }
Open the app.component.html file and add the code in it.
<owl-carousel [options]="slideOptions" [carouselClasses]="['owl-theme', 'sliding']"> <div class="item" *ngFor="let image of images"> <div> <img [src]="image" height="200px"> </div> </div> </owl-carousel>
Output:
Please give your valuable feedback and if you have any questions or issues about this article, please let me know.
Also, check How To Implement Lazy Loading Module In Angular 9
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
View Comments
Thank you so much for your code...how to change 3 image per slide
Thanks your code is working perfectly, but please how can i make it automatic instead of just slider or clicking on the dot to move to the next page.
Thanks i will be expecting your reply thanks
You're welcome.
Just add the below code in slideOptions
autoplay: true,