Build a Carousel image slider In VueJs 3 from scratch

#vuejs #vuetutorial #carouselcomponent #imageslider #vuecarousel

Get my Udemy course: Vue 3 - The practical guide only $15

We'll also add some controls on the carousel so that the user can also switch to the previous or next image by manually hitting the controls.
Besides that, we also add indicators that display how many images are on the page and indicate which image is active. Users can click on that to switch the current image.

Source code:

Timeline:
00:00 Introduction
00:47 Project setup
02:47 Carousel components structure
05:53 Basic styling
06:43 Adding transition effect
09:33 Adding slide controls
17:10 Adding slide indicators
22:27 Finishing touch

Music credits:
Kurt by Dimanche
Outside the Box, Broken, Love Aside by Patrick Patrikios

[akillarazarar]

No voice tutorials are a blessing! Thank you ! <3

[clkauk]

This was a great tutorial and taught me a few important techniques along the way.

[migueldemendoza]

Normally, I skip all no voice/explanation tutorials. This made me know how wrong I was. Tnx.

[MrPanyako]

I enjoyed it from start to finish. Surely the best of its type. Kudos brother!

[nikanorra]

how grateful I'm!
Super lesson! thanks a lot!!!

[Jasond]

Yo, dud! Cool video, ty, Ive learned a lot about animations and events!

I think there are a couple improvments could be made.
1) Eventleave is better here than eventout. It triggers a bit diferently.
2) Emit these events from <CarouselItem/> isnt neccessery, they can be declared right on <Carousel /> component.

And the last, i personaly more like when slide animation stops when mouse over <Carousel /> (includes buttons and indicators) and recreates when mouse leaves the component.

Also i some how managed to make the whole app "flexible", ive just put img with opasity 0 right next to <CarouselItem /> in <Carousel /> so the whole app can shrink or expand.

Defenetly will watch your other vids :) Good luck!

[badasscoder]

I almost left freelancing project. I am not good in Vanilla JavaScript. I am using Vue 3 with CDN in php. I tried different slider libraries nothing worked for me. All libraries are written in Vue 2. No support for Vue 3.

After many scrolling finally, I got a video titled "Build a Carousel image slider In VueJs 3 from scratch". Thank you so much. You saved my project.

[codewithbru]

Thank You so much for this video! You helped me a lot!!!

[jesseulundo]

Great Job, this is really good and solves some of the issues with the vuetify carousel. Could you please demonstrate how you could solve issues with responsiveness. I mean, how could you make the images automatically change size in different devices? Once again great JOB!!

[danielmartinezortega]

Hi, don't get the transition, I don't know why, the code class is the same but the transition does not have the effect of passing over the other image

[asyncFlex]

thanks u very much for the github JAJA

[agustinaguero]

how can i set images on indicator items ? its posible ?

[joaomateus]

This video would be much better if you commented what you were doing while coding, not only showing the code

[siphenkosifiltane]

I was looking forward to this but unfortunately the image does not display.

[raulromero]

how can I put a path to a local image that is not URL?

[legonz]

ok, i have no F*** clue how you get this to work. <img :src="slide" /> does not show anything here. Wrote your code 6 times now just in case i had a typo, but it doesnt work.

[faysalhafidi]

Thanks for all, I face an issue but a found a solution and I want to share it you : when I try to switch by next button the transition not appear but I solve it by this code : .slide-out-enter-to {
z-index:-1;
}