Angular Slider - Build Angular Carousel From Scratch Tutorial

Learn how to build an Angular slider from scratch. We will implement left and right arrows to navigate through slideshow. Our Angular image slider will be implemented without any additional libraries. We will use module approach to create this project. This Angular carousel tutorial will help you to understand how any slider works from the beginning to the end.

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
0:13 Angular Slider architecture
2:05 Creating module
6:39 Adding Angular carousel logic
9:48 Adding arrows
12:00 Jumping between slides

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[umeshbalasaravanan]

was cracking my head to implement carousel in angular. After seeing this, I was able to implement it easily. Thank you !

[nazar]

thank you, keep making videos on angular you are good at it

[javieru]

Thanks man, simple & clear, it really helped me out!!

[diegogb]

I did evertyhing as in the video and the carousel doesnt display, theres only like in a column 2 arros and 5 dots like a <ul>, any help pls?

[mpmng]

Great video. I have a question. Here why are we passing the data from the parent to the child using the input. Can we just directly implement the slides array in the child component?

[YoanGabriele]

Thank you for this video, was very useful. I have implemented the slider following your method and looks fantastic. Now I need to figurred out how to add the touch screen swaping funtionlatiy in native Angular... any sugestion?

[PhoenixSirius]

Thanks simple and clear.
How can we set this slider to be multi-image, that is, to pass 2 & 3 images at the same time?

[raretc]

Loved the tutorial was able to implement on my portfolio! I’m trying to make adjustments for mobile, but since we are passing parentWidth as a prop I can’t adjust it. What’s the best approach? Are Media queries able to be written inline in React? Thanks!

[michaelsivori]

hello,
very good video!
would have some version of how to put pagination ?! (ex: dots under the image)

[mahdiandalib]

thx man, teach how to add css animations when each slide is changed

[noss]

Is there any adventages or disadvantages, if we implement background image with Observable, instead of style binding?

[althafmoideenk]

Is it possible to add multiple items in a single view?

[viswanathaswamypk]

Great tutorial. Do you have any of your courses in Udemy?

[olegg]

how to add transition or animation to this slider ?

[motricalaalan]

This isn't angular way, you need to use rxjs

[senkamatic]

cool, but could you use notepad++ for clearer

[xinyawu]

Hi, Thanks for this Video. I have this problem "core.mjs:7635 ERROR TypeError: Cannot read properties of undefined (reading 'url')
at Can you please tell me how to fix it?