'How do I resolve two conflicting JQuery library?

I used this code as a tutorial in my project to enable mobile swipe to reveal functionality.

On its own it works perfectly as per code tutorial, I am able to successfully swipe left to reveal the More, Flag and the Trash buttons, while swiping right reverses the process by hiding the More, Flag and the Trash buttons as seen in the image below.

The Swipe to reveal function in my project working perfectly

Following are the the projects js dependecies:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

...along with its css files:

<link rel='stylesheet' href='https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'>
<link href="css/bootstrap.min.css" rel="stylesheet">

I then found this push and reveal panel functionality that I thought I would add to my project, again on its on it works perfectly:

Following are the push and reveal panel dependencies:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://demos.jquerymobile.com/1.3.2/js/jquery.mobile-1.3.2.min.js"></script> 

...along with its css files:

<link rel='stylesheet' href='https://demos.jquerymobile.com/1.3.2/css/themes/default/jquery.mobile-1.3.2.min.css'>
<link rel='stylesheet' href='https://demos.jquerymobile.com/1.3.2/_assets/css/jqm-demos.css'>

After combining them in my project I noticed that the two dependecies seem to be conflicting, because my swipe to reveal functionality doesnt look the same, and I am not able to swipe any more. The image below is illustrates what it currently looks like:

The Swipe to reveal UI distored and the swipe not working anymore

Find below the js dependecies after combining the project:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>

..along with its css files:

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://demos.jquerymobile.com/1.3.2/css/themes/default/jquery.mobile-1.3.2.min.css'>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source