Bootstrap 5 Carousel Multiple Items Responsive

[@EvgenyPrigozhinDEV]

what happend to you that u came here to see an indian tutorial?

[@aliyousif8765]

Internship 😅😅

[@anu.jangra]

Internship 😅

[@uchihabolt]

Internship 😅😅

[@nick231446]

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.

[@parthsapariya-rb2wb]

all propertise use but multiple image is not show please help

[@travelsleisures]

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!

[@leaalyu0430]

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

[@codingyaar]

@LEA ALYU 04 Sure. You can share your code on discord. I'll have a look.

[@brightblue]

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)

[@codingyaar]

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 kzbin.infol8E_1pL-Soo?feature=share

[@adarshrathi8265]

your idea is excellent , first put card then put carousel, because in build carousel size not customize

[@fatewriter]

Great video! This is exactly what I was needing!

[@AyaanSajad]

how do we select all the image cards at once???? please lmk

[@codingyaar]

Not quite sure, but are you looking for something like this (3 cards at once) kzbin.info/www/bejne/oXmznpJ3od2Dbbc

[@mrcrazy00077]

if you are still here thanks for watching !! bolneka tharika thoda casual hai🤣💚

[@codingyaar]

🙃

[@linzykim2909]

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...

[@codingyaar]

It's the opposite of what should be happening. Have you included the jQuery code properly?

[@thomasalston]

Awesome video. Not much out on this topic, this helped me out. Thank you.

[@codingyaar]

Glad it helped!

[@parthsapariya-rb2wb]

only one image is show

[@Aquadiction]

Thanks for this video, got it working after a few failed attempts, just typos on my part! New subscriber here for sure!!

[@tathyfigueroa7996]

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

[@Maxim99t]

maybe bootstrap overwrites your styling, make sure to use !important.

[@pedropaulo5576]

if I try to add 2 carousels for different topics the button prev and next changes all carousels

[@codingyaar]

Here's how to manage multiple carousels on same page: kzbin.info/www/bejne/hIXaioqBh8uCaac

[@rafaelmatera2180]

Awesome thank you so much!!! 💯

[@uttamkumarswarnakar4614]

Which software are you using ma'am?

[@codingyaar]

Visual Studio Code

[@valerianafuna8972]

tried this same example but the card is not sliding away. it slides away and then back to the same position

[@codingyaar]

Have you checked the classnames? Are you using a Bootstrap 4 carousel?

[@hamzabouzeboudja5905]

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

[@codingyaar]

are you using carousel-item div for each card?

[@hamzabouzeboudja5905]

@@codingyaar yes

[@codingyaar]

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.

[@NeenuJose-ov7ng]

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.

[@headache2061]

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!

[@codingyaar]

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.

[@tusharshihab6955]

I don't want the cards stop scrolling when they reach at the last. So, how can I use loop for them?

[@codingyaar]

You could add an else block and set the scroll position to 0 when you've reached the last card.

[@luismiguelmusica8738]

CUANDO LO PONGO REPONSIVE LAS IMAGENES SE MUEVEN SOLAS Y RAPIDO. ¿ ME PUEDES AYUDAR? GRACOIAS

[@codingyaar]

You'll have to use some JS to detect when the screen size changes to avoid that.

[@vishalbrahma7382]

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

[@codingyaar]

It does work with ngFor. Are you getting any errors?

[@valerianafuna8972]

i dont have any errors on the console

[@hollymarshall1553]

Hi! Thanks for the video. Should this work with the new version of bootstrap?

[@codingyaar]

Yes, it does work with the new Bootstrap version.

[@NeenuJose-ov7ng]

For me it is not working as responsive

[@codingyaar]

are you getting any errors?

[@EvaDress]

Thank you so much!!! Great video

[@thesandman-f3l]

hi. this not working. left right button animation.

[@codingyaar]

Sorry for the late reply. Did you manage to make it work?

[@kcnitesh]

Amazing Thanks :)

[@ashikeshan1529]

If you are still here.... then ????? hahaha

[@codingyaar]

🙃

[@victor398]

Great video.. can It be done with java instead of jquery?

[@codingyaar]

Why would you use Java for that? Do you mean JavaScript?

[@victor398]

@@codingyaar sorry, yes. I meant JavaScript....

[@codingyaar]

The website(link in the description) has a pinned comment below with vanilla JavaScript code.

[@Bonini171]

Great video! Nice work.

[@zxxczczczcz]

how to make 3 items slide at same time

[@codingyaar]

As mentioned on the website, you need to multiply the cardwidth by 3: scrollPosition += cardWidth * 3;

[@pedropaulo5576]

best of all time

[@Belzie]

the best and fastest tutorial, thank you!

[@gumballcv1680]

thank you

[@khushi_pithadiya]

i'll try this code but slider can't move in my code when i click on next can you help me?

[@codingyaar]

are you getting any errors in the console?

[@khushi_pithadiya]

@@codingyaar yes error will in carousel.js file

[@khushi_pithadiya]

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

[@codingyaar]

what's on that line? Have you checked if you are using anything that's undefined?

[@orlandomorales4293]

Thank you so much! This tutorial was really helpful

[@codingyaar]

Happy to help 🙂

[@Strongest845]

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]

Moves like a wave? Sorry! I don't get what you are saying.

[@Strongest845]

@@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

[@codingyaar]

​@@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

[@Strongest845]

@@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

[@codingyaar]

@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?

[@samoli02]

How to do it in react ?

[@codingyaar]

Sorry, I don't know that one

[@samoli02]

It's ok bro

[@peregrinodev]

LOVE U SOME MUCH GOT IT

[@codingyaar]

Got it

[@anonymousmyanmar]

show mobile view

[@codingyaar]

8:35 is the mobile view

[@gomabibo]

Thank you, miss!

[@codingyaar]

You're so welcome!

[@Usaid-u5u]

Thank you

[@codingyaar]

Welcome!

[@jcdeleon3295]

you saved my time thanks!

[@codingyaar]

Glad to hear that! 🙂

[@qx2t]

thanks

[@codingyaar]

Welcome

[@robertarjona5407]

Nice video help me a lot

[@codingyaar]

Glad to hear that😊

[@dcentsonu6074]

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

[@codingyaar]

Are the cards not displayed properly or the controls are not working?

[@azhaa7697]

same error css is not working for me, card stil 1

[@kacper4267]

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]

Have you not linked Bootstrap's JS?

[@kacper4267]

@@codingyaar Yes:

[@codingyaar]

🤔 try using the CDN link to check you have the right path

[@kacper4267]

@@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

[@codingyaar]

Make sure you have included jQery link before bootstrap's JS just before