Question

BOOTSTRAP旋转木马根本没有滑动我一直在努力使这个旋转木马工作，但它不想滑动停留在活动幻灯片和按钮doest工作，我已经检查了所有的链接JS和css的所有文件everysingle一个工作，但我可以告诉我为什么旋转木马没有滑动只是留在活动的

上

<!-- language: lang-html -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="carousel-staffpick" class="carousel slide" data-ride="carousel">
                <!-- indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-staffpick" data-slide-to="0"></li>
                    <li data-target="#carousel-staffpick" data-slide-to="1"
                        class="active"></li>
                    <li data-target="#carousel-staffpick" data-slide-to="2"></li>
                </ol>
                <!-- wrapper for slides -->
                <div class="carousel-inner">
                    <!-- item 01 -->
                    <div class="item  text-center">
                        <img src="{% static 'img/client-01.jpg' %}" alt="staffpick" class="center-block">
                        <div class="staffpick-caption">
                            <h2>Ryad Mahrer</h2>
                            <h4>
                                <span> FootBall Player </span>Licter City
                            </h4>
                            <p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                                laboris nisi ut aliquip.”</p>
                        </div>
                    </div>
                    <!-- item 02 -->
                    <div class="item active text-center">
                        <img src="{% static 'img/client-02.jpg' %}" alt="client-02" class="center-block">
                        <div class="staffpick-caption">
                            <h2>zlatan ibrahimovic</h2>
                            <h4>
                                <span> FootBall PLayer </span>Man Unt
                            </h4>
                            <p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                                laboris nisi ut aliquip.”</p>
                        </div>
                    </div>
                    <!-- item 03 -->
                    <div class="item text-center">
                        <img src="{% static 'img/client-03.jpg' %}" alt="staffpick" class="center-block">
                        <div class="staffpick-caption">
                            <h2>Jamie Vardy</h2>
                            <h4>
                                <span> FootBall PLayer </span>Licter City
                            </h4>
                            <p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                                laboris nisi ut aliquip.”</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="{% static 'js/bootstrap.min.js' %}"></script> 
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script language="JavaScript" type="text/javascript">
      $(document).ready(function(){
        $('.carousel').carousel({
          interval: 2000
        })
      });    
    </script>

编辑：当我在网上尝试时，我已经尝试过滑块工作，但它无法在我的localhost上运行

Answer 1

我认为你忘了添加＆＃34; bootstrap.js＆＃34;

供您参考我已经创建了codepen请看看

http://codepen.io/santoshkhalse/pen/gLorga

 [1]: http://codepen.io/santoshkhalse/pen/gLorga

Answer 2

我在jquery之前调用了bootstrap.js，bootstrap需要jquery。通过改变顺序，所以jquery首先解决了问题感谢Bosc

BOOTSTRAP Carousel没有滑动

2 个答案: