The Swiper is a powerful and modern touch slider which is especially advantageous for mobile interfaces. Here's a step-by-step guide to implement the Swiper slider in Angular.<\/p>\r\n
1. Install Swiper: <\/strong><\/p>\r\n Firstly, you need to install Swiper into your Angular project. You can do this by using npm (node package manager). Open your terminal, navigate to your project directory and run the following command:<\/p>\r\n 2.Import Swiper styles:<\/strong><\/p>\r\n Swiper comes with its own styles that need to be included in your project for it to display correctly. Open your angular.json file and add the path to Swiper's CSS in the styles array:<\/p>\r\n Then, you should restart your development server to apply these changes.<\/p>\r\n 3.Import Swiper in your Angular component:<\/strong><\/p>\r\n You need to import Swiper in the component where you want to use it. In your component TypeScript file (for example, app.component.ts), add the following lines:<\/p>\r\n 4. HTML <\/strong>In your component HTML file (for example, app.component.html), you can now use the Swiper HTML structure:<\/p>\r\n Now, you should have a working Swiper slider in your Angular application! Don't forget to adjust the paths of the images and the Swiper options according to your needs.<\/p>\r\n Here is official documentation: https:\/\/swiperjs.com\/angular<\/p>","category_id":"13","is_private":"0","created_at":"2023-05-16T00:42:53.000000Z","updated_at":"2023-05-16T01:08:41.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"The Swiper is a powerful and modern touch slider which is especially advantageous for mobile interfaces. Here's a step-by-step guide to impl - swiper slider in angular (Updated: May 16, 2023) - Read more about swiper slider in angular at my programming site [SITE]","categories":[]}npm install swiper --save<\/code><\/pre>\r\n\"styles\": [\r\n \"src\/styles.css\",\r\n \"node_modules\/swiper\/swiper-bundle.min.css\"\r\n],<\/code><\/pre>\r\nexport class SliderComponent implements AfterViewInit {\r\n images:string[] = [\r\n \"assets\/img\/photos\/pp10.jpg\",\r\n \"assets\/img\/photos\/pp11.jpg\",\r\n \"assets\/img\/photos\/pp12.jpg\",\r\n \"assets\/img\/photos\/pp13.jpg\",\r\n \"assets\/img\/photos\/pp14.jpg\"\r\n ]\r\n ngAfterViewInit() {\r\n const swiper = new Swiper('.swiper-container .swiper', {\r\n \/\/ Optional parameters\r\n direction: 'horizontal',\r\n loop: true,\r\n slidesPerView: 'auto',\r\n spaceBetween: 30,\r\n touchEventsTarget: 'wrapper',\r\n simulateTouch: true,\r\n navigation: {\r\n nextEl: '.swiper-button-next',\r\n prevEl: '.swiper-button-prev',\r\n },\r\n pagination: {\r\n el: '.swiper-pagination',\r\n clickable: true \/\/ If you want the bullets to be clickable\r\n }\r\n\r\n });\r\n }\r\n}<\/code><\/pre>\r\n<section class=\"wrapper\">\r\n <div class=\"container-fluid px-md-6\">\r\n <div class=\"swiper-container blog grid-view mb-md-15\" data-margin=\"30\" data-nav=\"true\" data-dots=\"true\" data-items-xxl=\"3\" data-items-md=\"2\" data-items-xs=\"1\">\r\n <div class=\"swiper\">\r\n <div class=\"swiper-wrapper\">\r\n <div class=\"swiper-slide\" *ngFor=\"let image of images\">\r\n <figure class=\"rounded\"><img [src]=\"image\" alt=\"\" \/><\/figure>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"swiper-pagination\"><\/div>\r\n <div class=\"swiper-scrollbar\"><\/div>\r\n <\/div>\r\n<\/div>\r\n<\/section><\/code><\/pre>\r\n