This was very clear and easy to understand, words can't say how much I appreciate this so I ill just give this video a thumbs up, a subscribe and all notifications clicked.
Hello and thank you very much for sharing this. I have been trying without luck to hide one the controls when you are on the first or the last item (since you cannot go any further it does not make sense to have the arrow) . Do you have any suggestions how one can do that ? (I actually manage to hide it but if I do, I cannot put it back once I am on the second card or once I have moved back to the second last)
Just like we check to stop going further, use an if statement to check if the scrollPosition is less than or equal to zero to hide the prev button and similarly for the next one. Update: Here's how you can do it th-cam.com/users/shortsl8E_1pL-Soo?feature=share
I followed the tutorial to the end, but the next and previous controls are not in the correct position, can you check my code? control position is on top of the card, not next to it
Thank you very much for your great unique solution! It works in Joomla 4 with Bootstrap v5.1.3 and jQuery v3.6.0. It means that we can make carousel just with standart tools of Joomla. It didn't work at first and I have error in Firefox: Uncaught TypeError: can't access property "scrollWidth", $(...)[0] is undefined and in Chrome: Uncaught TypeError: Cannot read properties of undefined (reading 'scrollWidth') But the author gave advice to place the script after the HTML or wrap the script in: $(document).ready(function () { //jQuery code }); and it started to work!
why when i delete "slide" ini html , the card can't move. If i not delete it, it's move but just move to the side and back again to the first position?? can you help me...
hi i have a problem: when i click next or previous button, it only moves one card then it go back to it places, it moves like a wave, it doesnt move all carousel, please help me
@@codingyaar its is very difficult to say:when you press next or previous button only 1 card move at a time, example when I press right, first card move to the right then move back to old position, press right again and the second card move like that. I set the bound is 4 cards, the cards from 5 and beyond never move to the screen. it is very hard to say because I'm not good at English
@@Strongest845 still not sure but please recheck: - use the correct carousel for the respective Bootstrap version - check if you are using minified version of jQuery (which should be linked before the Bootstrap js link) - also check if you have removed the slide class from the carousel HTML
Hello, so in my project, I want to have 2 carousels in one page, i tried and when i click on prev/next button of the second carousel my first one moved also, but when i click the one from the first carousel it works fine, the second one doesnt move at all (nomalr), how to fix it? Awesome video btw, very helpful!
You need to have unique ids for both. If their ids are the same, the controls will work for the first one on that page. You would also need to add the second id in the JS and wherever it's used.
Hi, thanks for this great video, but i am facing problem when using ngFor for carousal items, the navigation button is not working, i tried ng-container too but still its not working
this error occur Uncaught TypeError: Cannot read properties of undefined (reading 'keyboard') carousel.js:206 at at._addEventListeners (carousel.js:206:22) at new at (carousel.js:104:10) at slider.js:4:18
his not work in apply this css .carousel-inner{ display: flex; } .carousel-inner .carousel-item{ display: block; margin-right: 0; flex:0 0 calc(100%/3); } pleas help mein i follow same pattern
I have an error: site.js:124 Uncaught ReferenceError: bootstrap is not defined at site.js:124:20 where this line is: $(multipleCardCarousel).addClass("slide"); Someone know how to solve this?
@@codingyaar i used and then it works on mobile but dont on desktop. I have two links and it works with strange animations but... works :v with some errors but works
This was very clear and easy to understand, words can't say how much I appreciate this so I ill just give this video a thumbs up, a subscribe and all notifications clicked.
Thanks for this video, got it working after a few failed attempts, just typos on my part! New subscriber here for sure!!
Awesome video. Not much out on this topic, this helped me out. Thank you.
Glad it helped!
Great video! This is exactly what I was needing!
how do we select all the image cards at once???? please lmk
Not quite sure, but are you looking for something like this (3 cards at once) th-cam.com/video/kHPm_AlxP7U/w-d-xo.html
it did not work for me , i followed you step by step but always stuck in the minute 1:21 , still one card only appear for me
are you using carousel-item div for each card?
@@codingyaar yes
Try without the media query. There's also a step by step explanation on the site. If you are still stuck, you can share your code on discord.
I got this error, for me the positioning of the CSS file was the issue. Once I placed it after Bootstrap CSS it got fixed.
Hello and thank you very much for sharing this.
I have been trying without luck to hide one the controls when you are on the first or the last item (since you cannot go any further it does not make sense to have the arrow) . Do you have any suggestions how one can do that ? (I actually manage to hide it but if I do, I cannot put it back once I am on the second card or once I have moved back to the second last)
Just like we check to stop going further, use an if statement to check if the scrollPosition is less than or equal to zero to hide the prev button and similarly for the next one.
Update: Here's how you can do it
th-cam.com/users/shortsl8E_1pL-Soo?feature=share
the best and fastest tutorial, thank you!
your idea is excellent , first put card then put carousel, because in build carousel size not customize
Great video! Nice work.
only one image is show
I followed the tutorial to the end, but the next and previous controls are not in the correct position, can you check my code?
control position is on top of the card, not next to it
@LEA ALYU 04 Sure. You can share your code on discord. I'll have a look.
Thank you so much!!! Great video
what happend to you that u came here to see an indian tutorial?
Internship 😅😅
Internship 😅
Internship 😅😅
Thank you so much! This tutorial was really helpful
Happy to help 🙂
all propertise use but multiple image is not show please help
Thank you very much for your great unique solution!
It works in Joomla 4 with Bootstrap v5.1.3 and jQuery v3.6.0. It means that we can make carousel just with standart tools of Joomla.
It didn't work at first and I have error in Firefox: Uncaught TypeError: can't access property "scrollWidth", $(...)[0] is undefined
and in Chrome: Uncaught TypeError: Cannot read properties of undefined (reading 'scrollWidth')
But the author gave advice to place the script after the HTML or wrap the script in:
$(document).ready(function () {
//jQuery code
});
and it started to work!
Great video.. can It be done with java instead of jquery?
Why would you use Java for that? Do you mean JavaScript?
@@codingyaar sorry, yes. I meant JavaScript....
The website(link in the description) has a pinned comment below with vanilla JavaScript code.
I don't want the cards stop scrolling when they reach at the last. So, how can I use loop for them?
You could add an else block and set the scroll position to 0 when you've reached the last card.
tried this same example but the card is not sliding away. it slides away and then back to the same position
Have you checked the classnames? Are you using a Bootstrap 4 carousel?
why when i delete "slide" ini html , the card can't move. If i not delete it, it's move but just move to the side and back again to the first position?? can you help me...
It's the opposite of what should be happening. Have you included the jQuery code properly?
Awesome thank you so much!!! 💯
if you are still here thanks for watching !! bolneka tharika thoda casual hai🤣💚
🙃
hi i have a problem: when i click next or previous button, it only moves one card then it go back to it places, it moves like a wave, it doesnt move all carousel, please help me
Moves like a wave? Sorry! I don't get what you are saying.
@@codingyaar its is very difficult to say:when you press next or previous button only 1 card move at a time, example when I press right, first card move to the right then move back to old position, press right again and the second card move like that. I set the bound is 4 cards, the cards from 5 and beyond never move to the screen. it is very hard to say because I'm not good at English
@@Strongest845 still not sure but please recheck:
- use the correct carousel for the respective Bootstrap version
- check if you are using minified version of jQuery (which should be linked before the Bootstrap js link)
- also check if you have removed the slide class from the carousel HTML
@@codingyaar ok so my error is look likes your steps 3 and 4 output on this video website source code, even though i followed your tutorials
@Manh Pham I've created a discord server for the queries that are difficult to solve in comments. Can you share your code or ss there?
Hi! Thanks for the video. Should this work with the new version of bootstrap?
Yes, it does work with the new Bootstrap version.
Thank you, miss!
You're so welcome!
if I try to add 2 carousels for different topics the button prev and next changes all carousels
Here's how to manage multiple carousels on same page: th-cam.com/video/NTwYWKRfO3E/w-d-xo.html
Which software are you using ma'am?
Visual Studio Code
CUANDO LO PONGO REPONSIVE LAS IMAGENES SE MUEVEN SOLAS Y RAPIDO. ¿ ME PUEDES AYUDAR? GRACOIAS
You'll have to use some JS to detect when the screen size changes to avoid that.
this is not working for me and i dont know why :( can you help me? none of this is working, the carrousel keeps displaying the same
maybe bootstrap overwrites your styling, make sure to use !important.
Hello, so in my project, I want to have 2 carousels in one page, i tried and when i click on prev/next button of the second carousel my first one moved also, but when i click the one from the first carousel it works fine, the second one doesnt move at all (nomalr), how to fix it? Awesome video btw, very helpful!
You need to have unique ids for both. If their ids are the same, the controls will work for the first one on that page. You would also need to add the second id in the JS and wherever it's used.
Hi, thanks for this great video, but i am facing problem when using ngFor for carousal items, the navigation button is not working, i tried ng-container too but still its not working
It does work with ngFor. Are you getting any errors?
hi. this not working. left right button animation.
Sorry for the late reply. Did you manage to make it work?
best of all time
you saved my time thanks!
Glad to hear that! 🙂
Amazing Thanks :)
For me it is not working as responsive
are you getting any errors?
i dont have any errors on the console
i'll try this code but slider can't move in my code when i click on next can you help me?
are you getting any errors in the console?
@@codingyaar yes error will in carousel.js file
this error occur
Uncaught TypeError: Cannot read properties of undefined (reading 'keyboard') carousel.js:206
at at._addEventListeners (carousel.js:206:22)
at new at (carousel.js:104:10)
at slider.js:4:18
what's on that line? Have you checked if you are using anything that's undefined?
How to do it in react ?
Sorry, I don't know that one
It's ok bro
how to make 3 items slide at same time
As mentioned on the website, you need to multiply the cardwidth by 3:
scrollPosition += cardWidth * 3;
LOVE U SOME MUCH GOT IT
Got it
Thank you
Welcome!
Nice video help me a lot
Glad to hear that😊
his not work in apply this css
.carousel-inner{
display: flex;
}
.carousel-inner .carousel-item{
display: block;
margin-right: 0;
flex:0 0 calc(100%/3);
}
pleas help mein i follow same pattern
Are the cards not displayed properly or the controls are not working?
same error css is not working for me, card stil 1
thanks
Welcome
thank you
If you are still here.... then ????? hahaha
🙃
show mobile view
8:35 is the mobile view
I have an error:
site.js:124 Uncaught ReferenceError: bootstrap is not defined
at site.js:124:20
where this line is:
$(multipleCardCarousel).addClass("slide");
Someone know how to solve this?
Have you not linked Bootstrap's JS?
@@codingyaar Yes:
🤔 try using the CDN link to check you have the right path
@@codingyaar i used and then it works on mobile but dont on desktop. I have two links and it works with strange animations but... works :v with some errors but works
Make sure you have included jQery link before bootstrap's JS just before