jquery - Bootstrap carousel 仅适用于 jquery slim 但需要完整的 jquery

Question

我在我的网站中使用 bootstrap 4... 我有一个轮播，其中一张幻灯片是我使用 jquery 创建的排序活动。

问题是，轮播仅在我在标签中添加此脚本时才有效：

<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/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

比旋转木马不起作用，但排序是......

这是我的整个头部标签代码：

   <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>

和我的旋转木马：

<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>

标签： jquerybootstrap-4carousel