Topic: Carousel cards all in one column

VendeeVarouj free asked 3 years ago


Hi, I have just joined MDB and copied the html and js for a carousel (Multi Item Carousel Advance - 1 item per time) and the carousel slides as it should but all the cards are in one column. I have the js at the bottom of the page but also have all the Bootstrap 4 css and js files loaded to. I don't see Bootstrap's d-block class anywhere in the html, would that be it?I hope this is enough info for an answer.Many Thanks, Chris

After some trial and error, the column of pictures is now just one picture but that's it just one picture when there should be 3 (or more). This is the carousel I would like https://mdbootstrap.com/docs/jquery/javascript/carousel/ Multi Item Carousel Advance - 1 item per time and I see the MDB PRO COMPONENT box which is why I paid my €100. I notice there is no css file with this carousel, is that right? Maybe I don't need one and I can't see that the js code is working at all because if I delete it, nothing changes. Anyway, getting nowhere fast but any help would be appreciated. Sorry I haven't posted a snippet but all the code is from this site.


Marcin Luczak staff commented 3 years ago

Hi,

Thank you for joining our community! All code needs to be used inside our MDB packages and from our customer page I can tell that you haven't download any yet. Are you using the carousel code within the Pro package downloaded from your account? Please check our 5 minute tutorial for using our products:

https://mdbootstrap.com/education/bootstrap/quick-start/

Regards, Marcin


VendeeVarouj free commented 3 years ago

Thank you Marcin for your reply. Sorry to say that I did follow the Get Started video before and did it again this morning to be sure but the result is the same. Instead of having 3 cards (col-md-4) in the carousel that change one at a time, I have a one column carousel showing all the cards aligned left. However, if I move the js to be the first script and not the last, I get just one card displayed (aligned left) but not 3. I notice there is a MDB PRO COMPONENT button above this snippet and wondered if I have the correct code even though I have paid my subscription and my account shows me as a Pro User. There is something missing here and I was really hoping to save some time but my first experience on this site is not going well. Please help. Thanks, Chris


Marcin Luczak staff commented 3 years ago

Hi,

I've just downloaded the package that you ordered to check whether is everything ok with our packages, and I have to say that if you download your MDB-Pro package, extract it, and then in the index.html file in the root folder you paste HTML code for your chosen Carousel, and JS code inside the script tag then everything works well, just like in the documentation. Please be sure that you paste JS code inside the script after <!-- Your custom scripts (optional) --> comment.

I recommend you to download your Pro package once again and do the above steps. This should fix your problem, but if not, please send the screen of the structure of your code here or send me a zipped folder with your code to m.luczak@mdbootstrap.com. I'll try to check if everything is ok with your files.

Regards, Marcin


VendeeVarouj free commented 3 years ago

Ah, I see the problem, the package I am downloading is the MDB_Free not MDB_Pro and now it works. May I suggest that that is made more clear when users sign up, Go To Orders, then download. Also that is not clear in the Get Started video. However, thank you very much Marcon for your patience and help. We got there in the end. Cheers, Chris


Marcin Luczak staff commented 3 years ago

I'm glad everything works fine now. Thank you for your suggestion about downloading our packages.

Regards, Marcin



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: Acer
  • Browser: all
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes