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.
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 isnt neccessery, they can be declared right on component. And the last, i personaly more like when slide animation stops when mouse over (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 in so the whole app can shrink or expand. Defenetly will watch your other vids :) Good luck!
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!!
You can check in your console. Make sure you have no error. Also since I use third party image, the problem could be there. You can try to use other image sources like from Unspash, pexels etc.
If the image does not show, you can inspect the image element in your browser. Make sure the src attribute has valid url. If it has valid url but the image still not displaying, the problem could be in your css code. It could also occurred in the image urls. You may change them with other urls. You can also compare your code with the repository that I attached in the video description.
Suppose you have images folder in public folder of your project. Then you can reference your images like this: slides: [ "/images/img-1.jpg", "/images/img-2.jpg", ],
ok, i have no F*** clue how you get this to work. does not show anything here. Wrote your code 6 times now just in case i had a typo, but it doesnt work.
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; }
No voice tutorials are a blessing! Thank you !
You're welcome :)
Normally, I skip all no voice/explanation tutorials. This made me know how wrong I was. Tnx.
This was a great tutorial and taught me a few important techniques along the way.
I enjoyed it from start to finish. Surely the best of its type. Kudos brother!
Glad to hear that you enjoyed it.
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.
Glad to hear that the video help you :)
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 isnt neccessery, they can be declared right on component.
And the last, i personaly more like when slide animation stops when mouse over (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 in so the whole app can shrink or expand.
Defenetly will watch your other vids :) Good luck!
how grateful I'm!
Super lesson! thanks a lot!!!
You're welcome. I'm glad you like it.
This is Vue 2 but looks good!
Thank You so much for this video! You helped me a lot!!!
Glad to hear that video help you.
Very useful! Thanks for sharing!
Glad to hear that the video is useful for you :)
Thank You so much for this video :)
thank you for this tutorial
cool video 😍 learn so much from it.
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!!
I had the same problem w vuetify and came up here
Great job thank you
awesome thanks alot
Great job, very very good!
Thank you
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
fantastic 👏👏👏❤️
when im trying , image not show
Very true..code is faulty
You can check in your console. Make sure you have no error. Also since I use third party image, the problem could be there. You can try to use other image sources like from Unspash, pexels etc.
You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this string as a dependency.
This video would be much better if you commented what you were doing while coding, not only showing the code
I explained everything in my course on Udemy. You can check out here:
bit.ly/practical-vue3
@@TutsPrime awesome :)
How do you make this drapable ?
I was looking forward to this but unfortunately the image does not display.
If the image does not show, you can inspect the image element in your browser. Make sure the src attribute has valid url. If it has valid url but the image still not displaying, the problem could be in your css code. It could also occurred in the image urls. You may change them with other urls.
You can also compare your code with the repository that I attached in the video description.
@@TutsPrime You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this string as a dependency.
how can i set images on indicator items ? its posible ?
i mean replace the dots for images ( i want to put logo for each one)
thanks u very much for the github JAJA
how can I put a path to a local image that is not URL?
Suppose you have images folder in public folder of your project. Then you can reference your images like this:
slides: [
"/images/img-1.jpg",
"/images/img-2.jpg",
],
You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this string as a dependency.
And where is VueJs 3 ?
ok, i have no F*** clue how you get this to work. does not show anything here. Wrote your code 6 times now just in case i had a typo, but it doesnt work.
Yes .. it does not work
@@edufreakslearn9523 try with require in front of the src it solved the problem for me
@@legonz5047 You have to wrap the path in require('.. /../.....') to let webpack know that it should handle this string as a dependency.
@@vuedev6324 could you post how you did it?
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;
}