'bootstrap drop down stops working when I use newer version of jquery

I incorporated a newer version of Jquery on my page to make a picture slider work, but when I link the jquery file to make the image slider work, the top menu stops working (dropdown menu's and mobile menu stop working). To make the image slider work in turn I have to remove the Jquery link from bootstrap. Pikachoose is the plugin I found for the image slider which requires

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

to work. I suspect the two jquery files conflict with each other. Does anyone have any idea how to fix this?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="js/jquery.pikachoose.min.js"></script>
<script language="javascript">

$(document).ready(

function (){

$("#pikame").PikaChoose(

{
showCaption:false,
autoPlay:true, 
IESafe:true, 
thumbOpacity:0.5, 
fadeThumbsIn: true 
}
);

});

</script>


</head>
    
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <a class="navbar-brand" href="#"></a></div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="defaultNavbar1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">abcdefg<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">c</a></li>
            <li><a href="#">d</a></li>
            <li><a href="#">e</a></li>
            <li><a href="#">f</a></li>
            <li><a href="#">g</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>


<div class="container-fluid about text-center">
    <div class="row">
        <div class="col-xs-12"><h1>header1</h1><h2>header2</h2></div>
    </div>
</div>

<div class="wrapper">
    <div id="main">
        <div id="content">
            <div class="entry-left">
                <div id="mainSlide">
                    <ul id="pikame">
                    <li><img alt="" src="images/healthcarebrothers/keiichiando/keiichiando1.jpg" /></li>
                    <li><img alt="" src="images/healthcarebrothers/keiichiando/keiichiando2.jpg" /></li>
                    <li><img alt="" src="images/healthcarebrothers/keiichiando/keiichiando3.jpg" /></li>
                    <li><img alt="" src="images/healthcarebrothers/keiichiando/keiichiando4.jpg" /></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.js"></script>

</body>
</html>
jquerytwitter-bootstrapconflictpikachoose


Solution 1:[1]

Replace the jQuery library on top with the one on bottom, that might fix the issue.

The reason i understand is that the first jQuery library is an old version that is why it doesn't work.

And the reason why your code doesn't work when you remove the upper library is that the file 

<script type="text/javascript" src="js/jquery.pikachoose.min.js"></script>

is included before the file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

The right way to do this is that you must place all the jquery files after the main jquery file so the jquery is loaded first. All you have to do is replace this code 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/base.css">

<script type="text/javascript" src="js/jquery.pikachoose.min.js"></script>

with 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/base.css">

<script type="text/javascript" src="js/jquery.pikachoose.min.js"></script>

and remove the jquery file from bottom and it might work.

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 Awais Ashraf

Related Questions