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

Improve this question
5
  • Do you have any error in your browser console?
    – Lodder
    Jun 17, 2020 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, 2020 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, 2020 at 19:19
  • @TVBZ any chance you could provide the module code? I'm trying to achieve something similar and it would be very helpful, thanks!
    – jonboy
    Dec 16, 2020 at 9:48
  • 1
    @jonboy Sure.. You can find the complete module here on Github. This module loads images from directory, it has many of the owl carousel options as module settings. Good luck! :)
    – TVBZ
    Dec 16, 2020 at 9:54

1 Answer 1

Reset to default
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
2
  • 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, 2020 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, 2020 at 19:17

Your Answer

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

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