1

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.

(function($){   
    $(document).ready(function(){
        $('.dropdown-toggle').dropdown();

        // Script to Activate the Carousel 
        $('.carousel').carousel({
            interval: 3000,
            pause: 'none'
        });
    });

})(jQuery);

Code Pen Link

11
  • 1
    Are you getting any console log errors? If so, please add them to your question.
    – Lodder
    Commented May 13, 2016 at 19:42
  • not really, just jQuery is undefined, but its coming from Joomla's no conflict script. Commented May 13, 2016 at 19:46
  • Try removing (function($){ and })(jQuery); then replacing $(document).ready(function(){ with jQuery(document).ready(function($){
    – Lodder
    Commented May 13, 2016 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); Commented May 13, 2016 at 20:04
  • How are you importing the script? And do you have multiple jQuery instances?
    – Lodder
    Commented May 13, 2016 at 20:42

1 Answer 1

1

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 and acknowledge you have read our privacy policy.

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