0

I am trying to display a carousel in an article using the bootstrap code.

This is a new Joomla 4 install using the casseiopa template. Here is my code:

<div class="d-flex justify-content-center">
  <div id="homePageCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="images/homepage/image1.jpg" loading="lazy" width="626" height="440" data-path="local-images:/homepage/humument.jpg"/>
    <div class="carousel-caption d-none d-md-block">
      <p>Caption</p>
    </div>
  </div>
  <div class="carousel-item">
   <img src="images/homepage/image2.jpg" loading="lazy" width="626" height="440" data-path="local-images:/homepage/con_grosso.jpg"/>
    <div class="carousel-caption d-none d-md-block">
      <p>Caption</p>
    </div>
  </div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#homePageCarousel" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#homePageCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

There are no JS errors and the mark up is all there with the correct images but the carousel doesn't slide. Even if you click the "next" button?

Do I need to initialise it somehow? Here is the JS stack btw in the header:

<script src="/media/mod_menu/js/menu-es5.min.js?48ca03fa0e3b50d7aa4e5f89b9c52113" nomodule="" defer=""></script>
<script src="/media/vendor/jquery/js/jquery.min.js?3.6.3"></script>
<script src="/media/legacy/js/jquery-noconflict.min.js?04499b98c0305b16b373dff09fe79d1290976288"></script>
<script type="application/json" class="joomla-script-options loaded">{"joomla.jtext":{"ERROR":"Error","MESSAGE":"Message","NOTICE":"Notice","WARNING":"Warning","JCLOSE":"Close","JOK":"OK","JOPEN":"Open"},"system.paths":{"root":"","rootFull":"http:\/\/test-tomphillips.dreamhosters.com\/","base":"","baseFull":"http:\/\/test-tomphillips.dreamhosters.com\/"},"csrf.token":"ed896ea8e6ad30bc3e01d7df0a107698"}</script>
<script src="/media/system/js/core.min.js?576eb51da909dcf692c98643faa6fc89629ead18"></script>
<script src="/media/templates/site/cassiopeia/js/template.min.js?48ca03fa0e3b50d7aa4e5f89b9c52113" defer=""></script>
<script src="/media/system/js/messages-es5.min.js?44e3f60beada646706be6569e75b36f7cf293bf9" nomodule="" defer=""></script>
<script src="/media/system/js/messages.min.js?7425e8d1cb9e4f061d5e30271d6d99b085344117" type="module"></script>

2 Answers 2

0

I use a free module to activate the Bootstrap components where en when needed, very handy: https://github.com/ceford/j4xdemos-mod-custom-bscompos

And then I read the bootstrap documentation and try the examples: https://getbootstrap.com/docs/5.2/components/carousel/

0

Casseiopa already uses use Joomla\CMS\HTML\HTMLHelper;. So you can insert anywhere HTMLHelper::_('bootstrap.carousel'); To initiate the bootstrap 5 carousel included in Joomla 4.

You can refer to the joomla documentation https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4#Carousel.

You can also follow this link with a tutorial on the subject : https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4#Approach_2:_Using_a_Content_Plugin

hoping this helps you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.