How to use Swiper js in Angular 17?

  Рет қаралды 12,526

AyyazTech

AyyazTech

Күн бұрын

Пікірлер: 71
@shamsundar1675
@shamsundar1675 7 ай бұрын
You are the hope of angular developers for using trending/useful libraries/packages/things in Angular projects. Thanks
@AyyazTech
@AyyazTech 7 ай бұрын
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! 😊👍
@o.abdelaaziz
@o.abdelaaziz 10 ай бұрын
thanks sir, keep doing the amazing work 🙌😁👍
@AyyazTech
@AyyazTech 10 ай бұрын
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
@o.abdelaaziz 10 ай бұрын
@@AyyazTech i appreciate that , thnx
@IvanMalinovskyi-q4z
@IvanMalinovskyi-q4z 10 ай бұрын
Thanks a lot! You are doing great work!
@AyyazTech
@AyyazTech 10 ай бұрын
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! 🌍🔔💖
@goksshn5046
@goksshn5046 8 ай бұрын
you are first class, as always 😁
@AyyazTech
@AyyazTech 8 ай бұрын
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!
@ronfap2008
@ronfap2008 10 ай бұрын
Great, thanks for this video Angular 17 + swiper
@AyyazTech
@AyyazTech 8 ай бұрын
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!
@FAHADKHAN-uy4pn
@FAHADKHAN-uy4pn 7 ай бұрын
straight to the point. love it
@AyyazTech
@AyyazTech 7 ай бұрын
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
@samtherock1 9 ай бұрын
Hello sir, How can we add responsive breakpoints.
@AyyazTech
@AyyazTech 9 ай бұрын
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.
@Toneryan
@Toneryan 9 ай бұрын
Thank you brother, but how to change next and prev buttons ? and how to move buttons ?
@AyyazTech
@AyyazTech 9 ай бұрын
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! 🚀
@timilehinoladapo3754
@timilehinoladapo3754 2 ай бұрын
got yoursellf a new subscriber dawg, quality content
@DAVIDDANIELGUTIERREZCALDERON
@DAVIDDANIELGUTIERREZCALDERON 3 ай бұрын
but how to use the effect fade ?
@ReactedToAngular
@ReactedToAngular 4 ай бұрын
my friend you don't know how did you alots of work for me (: thankssss
@diegodacostaporto3266
@diegodacostaporto3266 4 ай бұрын
Very useful info! thanks
@PablockDA
@PablockDA 7 ай бұрын
Thanks mate, helped a lot!
@Rohan-l6h
@Rohan-l6h 7 ай бұрын
I want to move the navigation arrow on a specific position how can I do this ?
@ahmedfarag569
@ahmedfarag569 10 ай бұрын
Thank you my friend Do you know how to make the pagination work by clicking on bullets ?
@AyyazTech
@AyyazTech 8 ай бұрын
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!
@SalmanShafiq-y3q
@SalmanShafiq-y3q 6 ай бұрын
How to customize swiper from component? I want to create custom button for navigation.
@WeAreMuslim320
@WeAreMuslim320 6 ай бұрын
How to reduce pagination button size it's comming too large plz answer
@Front-End-Egineer
@Front-End-Egineer 4 ай бұрын
how can use it , swiper option in TS file like : Breakpoints and custom add API how do can it
@kurtismelkisoft4309
@kurtismelkisoft4309 3 ай бұрын
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
@AyyazTech 3 ай бұрын
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.
@onur50
@onur50 10 ай бұрын
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
@AyyazTech 8 ай бұрын
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!
@Beautifulcomments
@Beautifulcomments 9 ай бұрын
When I add page Routing in my angular project. Swiper stops working when I change pages?
@AyyazTech
@AyyazTech 8 ай бұрын
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!
@YF-77
@YF-77 3 ай бұрын
well done and thanks for this video
@LokeshKumar-vo2xc
@LokeshKumar-vo2xc 4 ай бұрын
how to turn on autoplay
@ReactedToAngular
@ReactedToAngular 4 ай бұрын
i use ssr now facing that the swiper won't load
@PedroHenrique-nz7hl
@PedroHenrique-nz7hl 4 ай бұрын
Thanks, very good!!!
@asfandyar_ali
@asfandyar_ali 8 ай бұрын
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
@AyyazTech 8 ай бұрын
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
@asfandyar_ali 8 ай бұрын
@@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.
@algorhythm.
@algorhythm. 8 ай бұрын
would love to see virtual slides with prepend and append. Their docs is confusing.
@AyyazTech
@AyyazTech 8 ай бұрын
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
@saq.ib01 6 ай бұрын
how to add dynamic slides. i am adding new images in my rray but swiper is not showing new slides.
@compton8301
@compton8301 3 ай бұрын
Did you finally figure it out? If yes, please share.
@saq.ib01
@saq.ib01 3 ай бұрын
@@compton8301 Yes, just added setTimeout and called swiper.update();
@AlexMihaa
@AlexMihaa 10 ай бұрын
Супер. Спасибо
@AyyazTech
@AyyazTech 10 ай бұрын
Спасибо за ваш отзыв! Я очень рад, что вам понравилось. Не забудьте подписаться на канал, поставить лайк, поделиться с друзьями и нажать на колокольчик, чтобы не пропустить новые видео. Если у вас есть идеи для будущих видео или вопросы, пишите в комментариях. Ваше мнение очень важно для меня! 🌟🔔
@GiviZurabovich
@GiviZurabovich 9 ай бұрын
how to use -> slideChangeTransitionEnd can u explain ?
@AyyazTech
@AyyazTech 9 ай бұрын
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
@GiviZurabovich 9 ай бұрын
@@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
@VitorCarlet 9 ай бұрын
thank you for the video
@AyyazTech
@AyyazTech 9 ай бұрын
You're welcome! Glad you found it helpful. If you have any more questions, feel free to ask. Happy coding! 😊
@CS_HimanshuVishwakarma
@CS_HimanshuVishwakarma 2 ай бұрын
In my project in angular 17 it doesn't woks
@DJaswanth-g4y
@DJaswanth-g4y 7 ай бұрын
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
@aashinsiby2484
@aashinsiby2484 9 ай бұрын
thank u boss
@AyyazTech
@AyyazTech 8 ай бұрын
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
@AGGPEE 8 ай бұрын
How can i customize the nav buttons?
@AyyazTech
@AyyazTech 8 ай бұрын
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
@zippytuananh 8 ай бұрын
@@AyyazTech not working, please check again, can you give me a stackblitz example?
@mahdiandalib186
@mahdiandalib186 10 ай бұрын
thx man, plz teack kendo using angular
@AyyazTech
@AyyazTech 10 ай бұрын
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
@mahdiandalib186 10 ай бұрын
thx for responsing, i would definitely love to learn kendo grid and how to create filters and the free version of kendo@@AyyazTech
@mahdiandalib186
@mahdiandalib186 10 ай бұрын
and i am still waiting for you to teach us how to create a comment section like youtue using angular
@mahdiandalib186
@mahdiandalib186 10 ай бұрын
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
@hamzababar8983
@hamzababar8983 10 ай бұрын
Koe e-com project + folder structure+ best experience add krein ❤
@AyyazTech
@AyyazTech 10 ай бұрын
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
@asfandyar_ali 8 ай бұрын
@@AyyazTech like CRUD via APIs, Models & classes, JWT token etc would be a great idea.
@thinhnc99
@thinhnc99 4 ай бұрын
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
@bhushandhapodkar7577 9 ай бұрын
Hello sir, are you understand hindi ??
@AyyazTech
@AyyazTech 9 ай бұрын
Yes
how to use JWT token in Angular 17
47:28
AyyazTech
Рет қаралды 11 М.
How to create Observable in Angular 17?
15:57
AyyazTech
Рет қаралды 2,4 М.
Интересно, какой он был в молодости
01:00
БЕЗУМНЫЙ СПОРТ
Рет қаралды 2,9 МЛН
I Can’t Believe They Added AI To The Browser
9:55
Web Dev Simplified
Рет қаралды 44 М.
How to customize Angular material theme | Angular 17?
17:53
AyyazTech
Рет қаралды 20 М.
From Zero to Hero in Web Development (Part 1)
50:52
PMVIEW TECHNOLOGIES
Рет қаралды 129
How to use Angular Signals | Angular 17?
30:23
AyyazTech
Рет қаралды 5 М.
«Если 50 детей не рожу - ничего не добился»
1:26:17
Саша Сулим
Рет қаралды 1,8 МЛН
Dynamic Component in Angular (2024)
17:48
Decoded Frontend
Рет қаралды 27 М.
Modern Angular 19 Crash Course - E-commerce App!
1:19:03
Zoaib Khan
Рет қаралды 4,4 М.
Learn Bubble.io in 30 Minutes
28:45
Jesse Showalter
Рет қаралды 135 М.
I built the same app 10 times // Which JS Framework is best?
21:58
Fireship
Рет қаралды 2,6 МЛН