Topic: multi-carousel
Expected behavior Hello, I hope you are all well and I am sorry to burden you again. Can you help me solve my problem with the basic multi-carousel example. I copied the basic template and placed it in a and a I have no problem with carousels, they all work, but just with the "multi-carousel".
See the example page: https://haute-savoie.ialpes.com/event/Test-mini-carousel.html All the small images are displayed in large and the carousel does not work. There are 4 thumbnails of 480x212 pixels and 4 large images 1200x530 pixels. Actual behavior For the test there are 4 images of different colors: pink, green, purple, black. - image 1 pink - thumbnail: ../img/icones/img-1-mini.jpg - 480x212 pixels image 1 large pink: ../img/icones/img-1-large.jpg - 1200x530 pixels - image 2 green - thumbnail: ../img/icones/img-2-mini.jpg - 480x212 pixels image 2 large green: ../img/icones/img-2 -large.jpg - 1200x530 pixels - image 3 purple - thumbnail: ../img/icones/img-2-mini.jpg - 480x212 pixels image 3 large purple: ../img/icones/img-2-large.jpg - 1200x530 pixels - image 4 black - thumbnail: ../img/icones/img-2-mini.jpg - 480x212 pixels image 4 large black: ../img/icones/img-2-large.jpg - 1200x530 pixels
Thank you for your help. *Resources (screenshots, code snippets etc.)* CSS: MDB JS:
Kamila Pieńkowska
staff
answered 10 months ago
Multi carousel is not part of the main MDB package. It is a plugin that requires separate JS and CSS import. You should import minified files as you do with UI-KIT. Please see how to do it in the first section of this page: https://mdbootstrap.com/docs/standard/pro/plugins-installation/#section-manual-installation
LAGIER priority commented 10 months ago
Hello Kamila,
Thank you for your information, you have done me a great service. I had started with another coding found on GitHub that works, but with a little more CSS and Js codes and to adapt, whereas with MDB it works by itself.
Thanks again and have a good evening or day.
Alain
LAGIER
priority
answered 10 months ago
Hello Kamila, Thanks for your assistance, but it doesn't work for me, I'm stuck.
If you look at the test page: https://haute-savoie.ialpes.com/event/Test-mini-carousel.html the 4 images all appear together in a vertical position, whereas they should be in a horizontal position as in the basic example on the MDB site: https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/ The extract you sent me in your response is exactly what I'm looking for. The snippet code is identical, it's a copy and paste of your example and it doesn't work. The images remain one above the other and there is no carousel. I tried with a "Blog-Horizontal" template page, without a personal style, it's the same. I made a new page (Page 2) based on an MDB template, in which there is no other code than those of MDB. Page 1 with my ads: https://haute-savoie.ialpes.com/event/Test-mini-carousel.html Page 2 *only the example and CSS and Js of MDB*: https://haute-savoie.ialpes.com/event/Test-multi-carousel-exemple-MDB.html "Plugin" there is "multi-carousel.js". Should I use it? I tried several codes without success. It is a problem of CSS and Js, but which ones. Could you tell me which CSS and Js of MDB you use to make the multi-carousel work. With my thanks.
Alain` Material Design for Bootstrap
<!-- Google Fonts Roboto -->
<!-- MDB <!-- MDB DOES NOT WORK
<link rel="stylesheet" href="../Templates/Multi-carousel-Plugin/css/mdb.min.css" />-->
<!-- * MDB5 * Version: PRO 8.0.0 <!-- MDB DOES NOT WORK -->
<link href="../asset/css/mdb.min.css" rel="stylesheet" type="text/css">
<!-- * MDB5 * Version: FREE 6.4.2 <!-- MDB DOES NOT WORK
<link href="../asset/css/free/mdb.min.css" rel="stylesheet" type="text/css">
-->
<!-- Custom styles -->
<!-- Image 1 -->
<div class="multi-carousel-item"> <img src="https://haute-savoie.ialpes.com/img/icones/img-1-mini.jpg" alt="Img 1" class="w-100"/> </div>
<!-- /Image 1 -->
<!-- Image 2 -->
<div class="multi-carousel-item">
<img src="https://haute-savoie.ialpes.com/img/icones/img-2-mini.jpg" alt="Img 2" class="w-100"/>
</div>
<!-- /Image 2 -->
<!-- Image 3 -->
<div class="multi-carousel-item">
<img src="https://haute-savoie.ialpes.com/img/icones/img-3-mini.jpg" data-mdb-img=".https://haute-savoie.ialpes.com/event/img/icones/img-3-large.jpg" alt="Img 3" class="w-100"/> </div>
<!-- /Image 3 -->
<!-- Image 4 -->
<div class="multi-carousel-item">
<img src="https://haute-savoie.ialpes.com/img/icones/img-4-mini.jpg" data-mdb-img="https://haute-savoie.ialpes.com/event/img/icones/img-1-large.jpg" alt="Img 4" class="w-100"/> </div>
<!-- /Image 4 -->
<!-- MDB DOES NOT WORK
<script type="text/javascript" src="../Templates/Multi-carousel-Plugin/js/mdb.min.js"></script>
-->
<!-- * MDB5 * Version: FREE 6.4.2 DOES NOT WORK
<script src="../asset/js/free/mdb.min.js"></script>
-->
<!-- MDB DOES NOT WORK -->
<script src="../asset/js/mdb.umd.min.js"></script>
<!-- Custom scripts -->
`
Kamila Pieńkowska
staff
answered 10 months ago
Here is a snippet for you, but I'm not sure if I understood your problem well.
https://mdbootstrap.com/snippets/standard/kpienkowska/6302027?view=project
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes