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.
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!
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; }
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.
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.
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.
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!!
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", ],
![[ВАЖНО - Читай описание] Универсальный компонент Слайдер (carousel) на Vue.js без плагинов!](http://i.ytimg.com/vi/ak61Y4-lGsQ/mqdefault.jpg)
![[ВАЖНО - Читай описание] Универсальный компонент Слайдер (carousel) на Vue.js без плагинов!](/img/tr.png)
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 :)
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.
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!
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;
}
thanks u very much for the github JAJA
This is Vue 2 but looks good!
awesome thanks alot
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.
Great job 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
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)
This was a great tutorial and taught me a few important techniques along the way.
how grateful I'm!
Super lesson! thanks a lot!!!
You're welcome. I'm glad you like it.
Thank You so much for this video :)
cool video 😍 learn so much from 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 :)
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?
thank you for this tutorial
How do you make this drapable ?
Thank You so much for this video! You helped me a lot!!!
Glad to hear that video help you.
And where is VueJs 3 ?
fantastic 👏👏👏❤️
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.
I enjoyed it from start to finish. Surely the best of its type. Kudos brother!
Glad to hear that you enjoyed 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
Very useful! Thanks for sharing!
Glad to hear that the video is useful for you :)
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.
Great job, very very good!
Thank you