0

I am making a custom module using Owl Carousel 2. For some reason it just doesn't work in Joomla. The html structure is there in frontend, but the owl carousel is not displayed.

Unfortunatly, there are no code snippets here in Joomla StackExchange, like we have on regular SE. But my code is rendered correctly.

CSS and JS are loaded properly using $document:

$document->addStyleSheet('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
$document->addStyleSheet('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css');
$document->addScript('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js','text/javascript', true, false);

Html output:

<div class="owl-carousel owl-theme">
    <div class="item">
        <img alt="180px koala ag1" src="images/sampledata/parks/animals/180px_koala_ag1.jpg" />
    </div>
    <div class="item">
        <img alt="180px wobbegong" src="images/sampledata/parks/animals/180px_wobbegong.jpg" />
    </div>
    <div class="item">
        <img alt="200px phyllopteryx taeniolatus1" src="images/sampledata/parks/animals/200px_phyllopteryx_taeniolatus1.jpg" />
    </div>
    <div class="item">
        <img alt="220px spottedquoll 2005 seanmcclean" src="images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg" />
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".owl-carousel").owlCarousel(
        loop:true,
        margin:10
    });
);
</script>

When moving this to a simple html file, it works fine (when adding jQuery). Just not in Joomla? I am using protostar template, so jQuery is enabled.

Additional info:

The slideshow is not visible because it is set to display:none in css.

enter image description here

When I set it to block, I can see the images, but they are not sliding. So I asume there is a problem loading the JS. I have tried with and without defer, using CDN and local. Nothing I tried helps.

Anyone know what I am missing?

Thanks

  • Do you have any error in your browser console? – Lodder Jun 17 at 12:10
  • 1
    What version of Joomla are you using? Do you have a link to your site? I've tried copying your code on my local J3 site and it works as expected. Are you sure there are no other errors in the browser console? – Lodder Jun 17 at 14:10
  • Problem is solved @Lodder thanks for your efforts! The problem was the curly brackets as Sharky pointed out. It just wasn't fixed here because I also changed the selector inside the html and forgot to change it in the script. – TVBZ Jun 17 at 19:19
1

You have a JavaScript error:

SyntaxError: missing ) after argument list

Wrap argument list in curly brackets:

jQuery(document).ready(function() {
  jQuery(".owl-carousel").owlCarousel({
    loop:true,
    margin:10
  });
});
| improve this answer | |
  • Hah.. thanks for pointing that out. Must have missed that during attempts. But it doesn't fix the problem. The owl carousel is still not displayed. – TVBZ Jun 17 at 13:02
  • Okay, that was the problem. just changed the dom selector in between testing and forgot to also change it inside the script so I couldn't enjoy your solution. Thanks! :) – TVBZ Jun 17 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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