I am having trouble getting my bootstrap 3 carousel to work. On the site it will automatically advance if you first click to advance a slide. I have disabled the pause on hover. I tested it on Code Pen and it works like a charm. I think it might be a conflict with the JS but I dont know where to start.


        // Script to Activate the Carousel 
            interval: 3000,
            pause: 'none'


Code Pen Link

  • 1
    Are you getting any console log errors? If so, please add them to your question. – Lodder May 13 '16 at 19:42
  • not really, just jQuery is undefined, but its coming from Joomla's no conflict script. – Chad J Treadway May 13 '16 at 19:46
  • Try removing (function($){ and })(jQuery); then replacing $(document).ready(function(){ with jQuery(document).ready(function($){ – Lodder May 13 '16 at 19:59
  • Still no luck, here is what I have: //jQuery noConflict from Joomla Script jQuery.noConflict(); // (function($){ jQuery(document).ready(function($){ // $(document).ready(function(){ $('.dropdown-toggle').dropdown(); // Script to Activate the Carousel $('.carousel').carousel({ interval: 3000, pause: 'none' }); }); // })(jQuery); – Chad J Treadway May 13 '16 at 20:04
  • How are you importing the script? And do you have multiple jQuery instances? – Lodder May 13 '16 at 20:42

Will post the answer as a reference.

In the end this was due to multiple instances of jQuery being loaded. 1 via a CDN and the other from Joomla's core.

Once fixed, we also ensured jQuery.noConflict(); was used directly after jQuery being loaded.

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.