Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

LAGIER priority asked 1 month ago


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 1 month 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 1 month 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 1 month 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 1 month 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



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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes