I'm using bootstrap 4 in my website... I have a carousel and one of the slides is a sorting activity I created using jquery.
The problem is, carousel works only if I add this scripts in the tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
but than the sorting doesnt work...
If I add this:
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
than the carousel don't work but the sorting is...
this is my entire head tag code:
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<!--<link href="Style/reset.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-grid.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jScripts/JavaScript.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
and my carousel:
<div id="carouselQ" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselQ" data-slide-to="0" class="active"></li>
<li data-target="#carouselQ" data-slide-to="1"></li>
<li data-target="#carouselQ" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active" data-ride="carousel">
<div class="carousel-content">
<div id="sortableQ1">
<ul id="sortable">
<li class="ui-state-default" id="workDrag"><img src="images/briefcase.png" width="100" height="100" /></li>
<li class="ui-state-default" id="friendshipDrag"><img src="images/friendship.png" width="100" height="100" /></li>
<li class="ui-state-default" id="loveDrag"><img src="images/love.png" width="100" height="100" /></li>
<li class="ui-state-default" id="schoolDrag"><img src="images/blackboard.png" width="100" height="100" /></li>
<li class="ui-state-default" id="familyDrag"><img src="images/family.png" width="100" height="100" /></li>
<li class="ui-state-default" id="moneyDrag"><img src="images/money-bag.png" width="100" height="100" /></li>
</ul>
</div>
<div id="draggableQ1spans">
<div id="spanMostImportant"><span>החשוב ביותר</span></div>
<div id="spanLessImportant"><span>החשוב פחות</span></div>
</div>
</div>
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item" data-ride="carousel">
<div class="q2Imgs">
<div class="q2ImgsDiv">
<img src="images/manager1.png" width="150" height="150" id="managerImgQ2" class="imagesTop" />
<img src="images/manager.png" width="150" height="150" id="managerImg2Q2" class="imagesBottom" />
<div class="q2Spans" id="teacherSpanQ2"><span>מורה/מנהל</span></div>
</div>
<div class="q2ImgsDiv">
<img src="images/family1.png" width="150" height="150" id="familyImgQ2" class="imagesTop" />
<img src="images/family.png" width="150" height="150" id="familyImg2Q2" class="imagesBottom" />
<div class="q2Spans" id="familySpanQ2"><span>בן משפחה</span></div>
</div>
<div class="q2ImgsDiv">
<img src="images/fist-bump1.png" width="150" height="150" id="friendImgQ2" class="imagesTop" />
<img src="images/fist-bump.png" width="150" height="150" id="friendImg2Q2" class="imagesBottom" />
<div class="q2Spans" id="friendSpanQ2"><span>חבר קרוב</span></div>
</div>
<div class="q2ImgsDiv">
<img src="images/nobody1.png" width="150" height="150" id="nobodyImgQ2" class="imagesTop" />
<img src="images/nobody.png" width="150" height="150" id="nobodyImg2Q2" class="imagesBottom" />
<div class="q2Spans" id="nobodySpanQ2"><span>אף אחד</span></div>
</div>
</div>
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item" data-ride="carousel">
<p>laisjloadjf</p>
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carouselQ" role="button" data-slide="prev">
<i class="fa fa-chevron-right fa-2x"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselQ" role="button" data-slide="next">
<i class="fa fa-chevron-left fa-2x"></i>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
