2

I am working on a website where I'd like to use jQuery 2.2.4 and jQuery 3.1.1. I want to use version 2.2.4 for my owl carousel 2, but I need 3.1.1 in order to make my standard fixed navbar from Bootstrap 4 Alpha work.

However, when I both add the following lines..

<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script> <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>

.. only the menu works. This is my owl-carousel 2 initializer:

  $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 30,
        nav: false,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3,
                loop: false,
                dots: true
            }
        }
    })

I have searched other topics and came across the noConflict(); option but I don't know how to implement this.

So, I need v2.2.4 for my carousel and I need v3.1.1 for a fixed navbar (without initializer). How would I make this possible without encountering problems?

M. Douglas
  • 347
  • 1
  • 4
  • 17
  • Please refer the previous thread in Stack overflow: [Implement jQuery noConflict()](http://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict) – Sarath Kumar Nov 02 '16 at 18:24

1 Answers1

1

Yes, it's possible due to jQuery's noconflict mode.

<!-- load jQuery 2.2.4 -->
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var jQuery_2_2_4 = $.noConflict(true);
</script>

<!-- load jQuery 3.1.1 -->
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var jQuery_3_1_1 = $.noConflict(true);
</script>

Then, instead of $('#selector').function();, you will have to use

jQuery_2_2_4('#selector').function(); OR jQuery_3_1_1('#selector').function();

Akshay Shrivastav
  • 1,115
  • 4
  • 17
  • 43
  • 1
    I understand this, but my problem is that the botostrap 4 fixed navbar doesn't have a jQuery initializer. – M. Douglas Nov 02 '16 at 18:38
  • 1
    For the owl carousel use the initialiser and for bootstrap 4 use the latest JQuery and don't initialise it, bootstrap will do the stuff itself :) – Akshay Shrivastav Nov 02 '16 at 18:50