我该如何使Bootstrap Carousel正常工作?

时间:2018-12-25 16:47:23

标签: jquery html

数据滑动,数据滑动到,数据骑行和数据切换在引导程序上不起作用。我正在尝试创建一个轮播和一个下拉菜单。这只是一个实验,但是代码仍然无法正常工作。我在代码中包含了js和jQuery。这是代码:

<div id="theCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#theCarousel" data-slide-to="0" class="active"> </li >
            <li data-target="#theCarousel" data-slide-to="1"> </li>
            <li data-target ="#theCarousel" data-slide-to="2"> </li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <div class ="slide1"></div>
                <div class="carousel-caption">
                    <h1>Amazing Backgrounds</h1>
                    <p>Thousands of Backgrounds for Free</p>
                    <p><a href="#" class="btn btn-primary btn-sm">Get them Now</a></p>
                </div>
            </div>
            <div class="item">
                <div class="slide2"></div>
                    <div class="carousel-caption">
                        <h1>Thousands of Colors</h1>
                        <p>Every Color you can Imagine</p>
                    </div>
            </div>
            <div class="item">
                <div class="slide3"></div>
                <div class="carousel-caption">
                    <h1>Amazing Illustrations</h1>
                    <p>And they are All Free</p>
                </div>
            </div>
        </div>
             <a class="left carousel-control" href="#theCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"> </span>
            </a>
            <a class="right carousel-control" href="#theCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
    </div>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle btn=lg" type="button" id="dropdownMenu1" data-toggle="dropdown" ar-a-haspopup="true" aria-expended="true">Favorite Hero
            <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li class="dropdown=header">Marvel</li>
                <li><a href="#">Spiderman</a></li>
                <li><a href="#">Captain America</a></li>
                <li><a href="#">Iron Man</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">DC</li>
                <li class="disabled"><a href="#">Superman</a></li>
                <li><a href="#">Batman</a></li>
                <li><a href="#">Flash</a></li>
        </div>
    </div>
    <script src="js/npm.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

你能帮我吗?

0 个答案:

没有答案