1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: Issue using Multi-Item Carousel

kennylajara priority asked 4 months ago

Expected behavior

See the multi-item carousel and be able to use it.

enter image description here

Actual behavior

See the images. No carousel functionality.

enter image description here

Resources (screenshots, code snippets etc.)

For the installation, I downloaded the Bootstrap 5 PRO, unzip it, moved the file into the assets directory of my project. and added the code snippets:

  • JS: vendor/mdb/7.1.0/js/mdb.umd.min.js
  • CSS: vendor/mdb/7.1.0/css/mdb.min.css

For the carousel, I am using the example code in the carousel: https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/#section-basic-example

Note: I am sure there is no conflict with other libraries because there is no other libraries other than the ones suggested (font awesome and roboto).

Kamila Pieńkowska staff answered 4 months ago

Multi-Item Carousel is a plugin so you have to import MDB files and Plugin code.

How did you link CSS and JS in your HTML?

kennylajara priority commented 4 months ago

I added the links as you will normally add any other CSS or JS file. The link tag for CSS and the script tag for JS. But I don't know how to import the plugins. I get an error stating that you can use import outside a module. Well... I am an old-fashioned backend developer who never paid attention to JS after the death of JQuery.

Kamila Pieńkowska staff commented 4 months ago

You can add another script tag with a path to the plugin file. An example of how to do that is in the index.html included in the package.

kennylajara priority commented 4 months ago

When I do that, I get an error stating that you can use import outside a module.

Kamila Pieńkowska staff commented 4 months ago

My answer probably wasn't clear enough.

I mean something like this:

  <!-- MDB ESSENTIAL -->
  <script type="text/javascript" src="js/mdb.umd.min.js"></script>
  <!-- MDB PLUGINS -->
  <script type="text/javascript" src="plugins/js/all.min.js"></script>

kennylajara priority commented 4 months ago

I don't have the plugins folder.

Kamila Pieńkowska staff commented 4 months ago

But you do have package Advanced?
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: Yes
Tags
multi-item-carousel
About author
kennylajara
0Support score
3Questions 0Answers 0Snippets