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
    May 13, 2016 at 19:42
  • not really, just jQuery is undefined, but its coming from Joomla's no conflict script. May 13, 2016 at 19:46
  • Try removing (function($){ and })(jQuery); then replacing $(document).ready(function(){ with jQuery(document).ready(function($){
    – Lodder
    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); May 13, 2016 at 20:04
  • How are you importing the script? And do you have multiple jQuery instances?
    – Lodder
    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 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.