How to use Swiper js in Angular 17?

[@shamsundar1675]

You are the hope of angular developers for using trending/useful libraries/packages/things in Angular projects. Thanks

[@AyyazTech]

Thank you so much for your kind words! I'm honored to be considered a source of hope for Angular developers. I'm committed to providing valuable insights and tutorials on trending and useful libraries, packages, and techniques for Angular projects. If you have any specific topics or questions you'd like me to cover in future videos, please feel free to let me know. Your support means a lot to me, and I'm here to help you succeed in your Angular projects. Keep coding and learning! 😊👍

[@IvanMalinovskyi-q4z]

Thanks a lot! You are doing great work!

[@AyyazTech]

Thank you so much for your kind words! 😊 I'm thrilled to hear you're enjoying my content. Don't forget to subscribe, like, share, and hit that bell icon for notifications to keep up with all my latest videos. Your support means the world to me! 🌍🔔💖

[@ronfap2008]

Great, thanks for this video Angular 17 + swiper

[@AyyazTech]

Thank you, I'm glad you found the video helpful! If you enjoyed it, please like and subscribe for more Angular content, including tutorials on popular libraries and best practices. For written guides and articles on Angular development, visit ayyaztech.com. Check out these related videos: - How to change favicon in Angular: kzbin.info/www/bejne/faLHiKqwrtBgnrM Thanks again for watching, and happy coding with Angular and Swiper!

[@goksshn5046]

you are first class, as always 😁

[@AyyazTech]

You just made my day! I'm thrilled to hear that my videos consistently hit the mark for you. It's an honor to be your go-to Angular resource. Your support means the world to me and fuels my passion to keep delivering top-notch content. If you enjoyed this video, smash that like button, subscribe, and hit the bell to stay in the loop. Don't forget to share the Angular love with your fellow devs! For more in-depth articles, swing by ayyaztech.com. Let's keep mastering Angular together!

[@Toneryan]

Thank you brother, but how to change next and prev buttons ? and how to move buttons ?

[@AyyazTech]

Thank you for reaching out, and I'm glad to see your interest in customizing the Swiper JS in your Angular 17 project! To change the next and previous buttons and move them around in your Swiper implementation, you'll mainly need to work with Swiper's navigation options and CSS for positioning. Here's a brief guide on how you can achieve this: 1. Customize Buttons: - First, ensure you have the navigation enabled in your Swiper options. If not, you can enable it by adding `navigation: true` or customizing it with your own selectors like so: ```javascript navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } ``` - You can use your own custom buttons by specifying their class names in the `nextEl` and `prevEl` properties. 2. Move Buttons: - To move the navigation buttons, you'll have to override the default CSS provided by Swiper. You can position them anywhere within the Swiper container by adjusting their `position`, `top`, `right`, `bottom`, and `left` properties in your CSS file. - For example, to move the next button to the bottom-right and the prev button to the bottom-left, you might write: ```css .swiper-button-next { bottom: 10px; right: 10px; top: auto; } .swiper-button-prev { bottom: 10px; left: 10px; top: auto; } ``` For more detailed customizations and insights into Angular development, check out these videos from our channel: - "How to make add to cart in Angular 17?" (kzbin.info/www/bejne/aXLIdKh3pN-cmZI) - "How to decode JWT token in Angular 17?" (kzbin.info/www/bejne/jGSUnJypedFngas) - "How to use a Javascript library in Angular 17?" (kzbin.info/www/bejne/b6qre2ZvoZpqaNE) Make sure to subscribe, like, share, and hit the notification bell to stay updated with our latest content. If you have any specific topics or questions, feel free to drop a comment below! Happy coding! 🚀

[@FAHADKHAN-uy4pn]

straight to the point. love it

[@AyyazTech]

Thank you! I'm glad you appreciate the direct approach. If you have any questions or need further assistance, feel free to ask. Don't forget to like, share, and subscribe for more helpful content. Also, click the bell icon for updates and visit ayyaztech.com for additional tutorials. Your support is greatly appreciated! 😊👍

[@samtherock1]

Hello sir, How can we add responsive breakpoints.

[@AyyazTech]

To add responsive breakpoints in Tailwind CSS, you can modify the `tailwind.config.js` file to customize the default breakpoints or add new ones. This allows you to define styles that apply at specific screen sizes, making your design responsive. For more detailed instructions and examples on how to customize your breakpoints for responsive design, check out this video: [How to change breakpoints in Tailwind CSS](kzbin.info/www/bejne/eZycY4N-g9qkjas). It guides you through the process of modifying and using breakpoints effectively in your projects.

[@o.abdelaaziz]

thanks sir, keep doing the amazing work 🙌😁👍

[@AyyazTech]

You're welcome, and thank you for the uplifting comment! 😁 It's comments like yours that keep me motivated to do my best. I'll definitely keep the videos coming. Remember to subscribe and hit the bell icon so you don't miss any of the amazing content on the way. If you have any suggestions or topics you're curious about, feel free to drop them in the comments. Your input is always appreciated! 👍🙌

[@o.abdelaaziz]

@@AyyazTech i appreciate that , thnx

[@timilehinoladapo3754]

got yoursellf a new subscriber dawg, quality content

[@YF-77]

well done and thanks for this video

[@ahmedfarag569]

Thank you my friend Do you know how to make the pagination work by clicking on bullets ?

[@AyyazTech]

To make the pagination bullets clickable, use the `clickable` property in the pagination configuration: ```html ``` Setting `clickable` to `true` makes the bullets interactive, allowing users to navigate to the corresponding slide. For more tips and tricks, watch these related videos: - How to change favicon in Angular: kzbin.info/www/bejne/faLHiKqwrtBgnrM And visit ayyaztech.com for comprehensive Angular guides and articles. Like and subscribe for more helpful content!

[@DAVIDDANIELGUTIERREZCALDERON]

but how to use the effect fade ?

[@ReactedToAngular]

my friend you don't know how did you alots of work for me (: thankssss

[@Front-End-Egineer]

how can use it , swiper option in TS file like : Breakpoints and custom add API how do can it

[@kurtismelkisoft4309]

How can you create a website for your works without put a searchbar.We really need to check all the pages to find what we want?

[@AyyazTech]

Thank you for bringing this to my attention. You're absolutely right - a search bar is important for user convenience. I appreciate your feedback and will be adding a search function to the website as soon as possible.

[@LokeshKumar-vo2xc]

how to turn on autoplay

[@Beautifulcomments]

When I add page Routing in my angular project. Swiper stops working when I change pages?

[@AyyazTech]

The issue of Swiper not working after changing pages with routing could be due to the slider initializing before the page content loads fully. To fix this, wrap your Swiper initialization code inside the `ngAfterViewInit` lifecycle hook to ensure the slider initializes after the view renders completely. For more troubleshooting tips, check out these related videos: - How to change favicon in Angular: kzbin.info/www/bejne/faLHiKqwrtBgnrM And visit ayyaztech.com for detailed Angular guides and articles. Like and subscribe for more Angular content!

[@onur50]

Sir, Can you make an example with the threejs library, I know there is a video you made before, but is it possible to make it up to date?

[@AyyazTech]

Absolutely! I'd be happy to create an updated tutorial on using Three.js with the latest Angular version. Three.js is powerful for creating 3D graphics and animations in the browser, and its integration with Angular opens up exciting possibilities. I'll work on a comprehensive, up-to-date guide on using Three.js with Angular. Subscribe and hit the bell icon to get notified when it's out. In the meantime, check out these related videos: - How to change favicon in Angular: kzbin.info/www/bejne/faLHiKqwrtBgnrM And explore ayyaztech.com for more Angular content. Stay tuned for the updated Three.js tutorial!

[@SalmanShafiq-y3q]

How to customize swiper from component? I want to create custom button for navigation.

[@WeAreMuslim320]

How to reduce pagination button size it's comming too large plz answer

[@diegodacostaporto3266]

Very useful info! thanks

[@PablockDA]

Thanks mate, helped a lot!

[@Rohan-l6h]

I want to move the navigation arrow on a specific position how can I do this ?

[@asfandyar_ali]

Ayyaz thanks for such a great tutorials. I tried with nested slider but it's not working properly. will you please comment if swiper js has support of nested sliders for Angular 17? thanks

[@AyyazTech]

Thank you so much for your kind words! I'm glad the tutorials have been helpful. Regarding nested sliders, Swiper JS does support them in Angular 17. To create nested sliders, place one `` inside another, assign unique class names or IDs to each container, and target them in your configuration. For more details and code examples, check out the blog at ayyaztech.com, where I cover various Angular topics in-depth. If you liked this tutorial, please consider subscribing and exploring these related videos: - How to change favicon in Angular: kzbin.info/www/bejne/faLHiKqwrtBgnrM Thanks for watching and happy coding!

[@asfandyar_ali]

@@AyyazTech Bro. I've already subscribed your very valuable channel. The amount of effort & quality you're contributing is truly commendable. I'll try what you've suggested and will feedback. Thank you so much again.

[@ReactedToAngular]

i use ssr now facing that the swiper won't load

[@PedroHenrique-nz7hl]

Thanks, very good!!!

[@algorhythm.]

would love to see virtual slides with prepend and append. Their docs is confusing.

[@AyyazTech]

Great suggestion about virtual slides with prepend and append! You're right, the docs can be a bit confusing on this topic. To implement virtual slides, use the `virtual` property in your Swiper configuration, then utilize `appendSlide` and `prependSlide` methods to dynamically add slides. I'll consider making a dedicated tutorial on this topic to provide a clearer explanation. In the meantime, check out these related videos: - How to change favicon in Angular: kzbin.info/www/bejne/faLHiKqwrtBgnrM And don't forget to visit ayyaztech.com for more in-depth Angular guides and articles. Subscribe to catch the virtual slides tutorial when it's out!

[@saq.ib01]

how to add dynamic slides. i am adding new images in my rray but swiper is not showing new slides.

[@compton8301]

Did you finally figure it out? If yes, please share.

[@saq.ib01]

@@compton8301 Yes, just added setTimeout and called swiper.update();

[@CS_HimanshuVishwakarma]

In my project in angular 17 it doesn't woks

[@DJaswanth-g4y]

how can we control the events of swiper. like longpress , doubletap ect. i seen doubletab event .. it i try to use that it not calling can you plese expline this

[@AlexMihaa]

Супер. Спасибо

[@AyyazTech]

Спасибо за ваш отзыв! Я очень рад, что вам понравилось. Не забудьте подписаться на канал, поставить лайк, поделиться с друзьями и нажать на колокольчик, чтобы не пропустить новые видео. Если у вас есть идеи для будущих видео или вопросы, пишите в комментариях. Ваше мнение очень важно для меня! 🌟🔔

[@GiviZurabovich]

how to use -> slideChangeTransitionEnd can u explain ?

[@AyyazTech]

The `slideChangeTransitionEnd` event in Swiper.js is triggered when the transition between slides is completed. This event is particularly useful when you need to perform any actions or update UI components after the slide transition has finished. Here's an example of how you can use the `slideChangeTransitionEnd` event in an Angular application with Swiper.js: ```typescript import { Component, ViewChild } from '@angular/core'; import SwiperCore, { SwiperOptions, Pagination } from 'swiper'; // Install the required modules SwiperCore.use([Pagination]); @Component({ selector: 'app-swiper-example', template: ` ` }) export class SwiperExampleComponent { @ViewChild('swiperRef', { static: false }) swiperRef: any; slides = [ { type: 'image', src: 'assets/img1.jpg', alt: 'Image 1' }, { type: 'image', src: 'assets/img2.jpg', alt: 'Image 2' }, { type: 'image', src: 'assets/img3.jpg', alt: 'Image 3' } ]; swiperConfig: SwiperOptions = { pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, spaceBetween: 30 }; onSlideChangeTransitionEnd() { // Get the current active slide index const activeSlideIndex = this.swiperRef.swiper.activeIndex; // Perform any actions or update UI based on the active slide index console.log('Slide change transition ended. Active slide index:', activeSlideIndex); } } ``` In this example, we have a Swiper component that displays a set of images. We're using the `slideChangeTransitionEnd` event to call the `onSlideChangeTransitionEnd` method whenever the slide transition is completed. Inside the `onSlideChangeTransitionEnd` method, we can access the current active slide index using `this.swiperRef.swiper.activeIndex`. You can then perform any necessary actions or update your UI components based on the active slide index. For example, you could update a slide counter, display slide-specific content, or trigger animations based on the active slide. The `slideChangeTransitionEnd` event is particularly useful when you need to synchronize UI updates or execute code that depends on the slide transition being completed. It ensures that your actions or updates happen after the slide has finished transitioning, providing a smooth and visually appealing user experience.

[@GiviZurabovich]

@@AyyazTech (slideChangeTransitionEnd)="onSlideChangeTransitionEnd()" doesn’t work in this form, and since I couldn’t set it up, I had to do everything through hummerge... I didn’t like the slider at all

[@VitorCarlet]

thank you for the video

[@AyyazTech]

You're welcome! Glad you found it helpful. If you have any more questions, feel free to ask. Happy coding! 😊

[@mahdiandalib186]

thx man, plz teack kendo using angular

[@AyyazTech]

Thanks for the suggestion! Kendo UI with Angular is a great topic, covering a wide range of components and functionalities. Could you specify which aspects of Kendo UI you're interested in learning about? Are there specific components or features you're curious about? Also, are you looking for tutorials on the free version of Kendo UI, or are you considering the paid features as well? Your feedback will help me create content that's tailored to your needs. Don't forget to subscribe and hit the bell icon for updates! 🌟👍

[@mahdiandalib186]

thx for responsing, i would definitely love to learn kendo grid and how to create filters and the free version of kendo@@AyyazTech

[@mahdiandalib186]

and i am still waiting for you to teach us how to create a comment section like youtue using angular

[@mahdiandalib186]

and if its possible for you please create a full website using angular and try to create long tutorials... for example a news website using angular or an lms... @AyyazTech @@AyyazTech

[@aashinsiby2484]

thank u boss

[@AyyazTech]

You're welcome! I'm glad I could help. If you found the tutorial useful, please like the video and subscribe for more Angular content. To further enhance your Angular skills, check out these related videos: - How to change favicon in Angular: kzbin.info/www/bejne/faLHiKqwrtBgnrM And don't forget to explore the in-depth articles and guides on ayyaztech.com. Thanks for watching and happy coding!

[@AGGPEE]

How can i customize the nav buttons?

[@AyyazTech]

To customize the navigation buttons in Swiper JS, you can use the `navigation` parameter in the `swiper` container and provide custom options. Here's how: 1. In your `app.component.html`, update the `swiper` container: ```html ``` 2. In your `app.component.ts`, define the `navigationOptions` object: ```typescript navigationOptions = { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }; ``` 3. Customize the navigation buttons using CSS: ```css .swiper-button-next, .swiper-button-prev { color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 50%; } ``` In this example, we set the `navigationOptions` object with `nextEl` and `prevEl` properties to specify the CSS classes for the next and previous buttons. Then, we style the buttons using CSS, changing their color, background, padding, and shape. Feel free to experiment with different styles to match your design preferences! If you found this helpful, don't forget to like the video and subscribe to the channel for more Angular tips and tricks. Also, check out ayyaztech.com for written tutorials and in-depth articles. Happy coding!

[@zippytuananh]

@@AyyazTech not working, please check again, can you give me a stackblitz example?

[@hamzababar8983]

Koe e-com project + folder structure+ best experience add krein ❤

[@AyyazTech]

Absolutely, that sounds like a fantastic idea for a tutorial! ❤️ Creating a comprehensive e-commerce project, complete with an organized folder structure and incorporating best practices for an optimal development experience, could be incredibly beneficial for many viewers. I'll definitely add this to the list of potential content topics. In the meantime, if there are specific aspects of e-commerce development you're curious about-like setting up the shopping cart, managing product listings, integrating payment gateways, or any particular technologies you're interested in (like Angular, React, or Vue for the frontend)-please let me know. Your input helps me tailor the content to what you find most useful. Don't forget to subscribe, like, and hit the bell icon so you won't miss this tutorial when it goes live. Your support and suggestions are what keep this channel growing and improving! 🔔💡🛒

[@asfandyar_ali]

@@AyyazTech like CRUD via APIs, Models & classes, JWT token etc would be a great idea.

[@thinhnc99]

Can you use swiper in angular and make a caroudel like the following video (kzbin.info/www/bejne/fWTChGaBosZgn68), please help me, thank you very much, looking forward to your feedback. Anise

[@bhushandhapodkar7577]

Hello sir, are you understand hindi ??

[@AyyazTech]

Yes