如何在同一页面中放置两个 Bootstrap 转盘？

ee7vknir  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(170)


我试图在同一个页面上使用两个 Bootstrap 转盘。下面是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--BOOTSTRAP LINKS FOR CAROUSEL-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--BOOTSTRAP LINKS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <!--START OF NAVBAR-->
    <div class="nav-box">
        <br>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <img src="logo.png" id="logo"></img>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT S</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <!--END OF NAVBAR-->
    <!--START OF BOOTSTRAP CAROUSEL-->
    <section class="section-white">
        <div class="container">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" style="width:100%; height: 500px !important;">
                    <div class="item active">
                        <img src="a.jpg" alt="...">
                        <div class="carousel-caption">
                            <h2>Heading</h2>
                        </div>
                    </div>
                    <div class="item">
                        <img src="b.jpg" alt="...">
                        <div class="carousel-caption">
                            <h2>Heading</h2>
                        </div>
                    </div>
                    <div class="item">
                        <img src="c.jpg" alt="...">
                        <div class="carousel-caption">
                            <h2>Heading</h2>
                        </div>
                    </div>
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </section>
    <!--END OF BOOTSTRAP CAROUSEL-->
    <!--START OF RADIO BAR-->
    <div class="radio-bar">
        <div class="text1">
            <h3 id="text1-line1">streams</h3>
            <h4 id="text1-line2">shows</h4>
        </div>
        <div id="audio">
            <audio controls>
                <source src="viper.mp3" type="audio/mp3" controls="controls">
            </audio>
        </div>
        <div id="podcast-box">
            <img src="icon.png" id="image"></img>
            <p id="pheading">casts</p>
        </div>
        <div id="blue-box">
            <img src="blue.svg" id="blue-box-image"></img>
            <p id="blue-box-heading">show</p>
        </div>
    </div>
    <!--END OF RADIO BAR-->
    <!--START OF ABOUT US BAR-->
    <div class="about-us">
        <h3 id="heading">ABOUT</h3>
        <p id="para">*******</p>
        <div class="image-box">
            <img src="image.jpg" id="image"></img>
        </div>
    </div>
    <!--END OF ABOUT US BAR-->
    <!--START OF VIDEO CAROUSEL-->
    <div class="container" id="container">
        <div class="row" id="row">
            <div class="col-md-12">
                <div id="Carousel" class="carousel slide" id="carousel">
                    <ol class="carousel-indicators" id="carousel-indicators">
                        <li data-target="#Carousel" data-slide-to="0" class="active" id="action"></li>
                        <li data-target="#Carousel" data-slide-to="1"></li>
                        <li data-target="#Carousel" data-slide-to="2"></li>
                    </ol>
                    <!-- Carousel items -->
                    <div class="carousel-inner" id="carousel-inner">
                        <div class="item active" id="item-active">
                            <div class="row" id="row">
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                            </div>
                            <!--.row-->
                        </div>
                        <!--.item-->
                        <div class="item" id="item">
                            <div class="row" id="row">
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                            </div>
                            <!--.row-->
                        </div>
                        <!--.item-->
                        <div class="item" id="item">
                            <div class="row" id="row">
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                                <div class="col-md-3">
                                    <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
                                </div>
                            </div>
                            <!--.row-->
                        </div>
                        <!--.item-->
                    </div>
                    <!--.carousel-inner-->
                    <a data-slide="prev" href="#Carousel" class="left carousel-control" id="carousel-control">‹</a>
                    <a data-slide="next" href="#Carousel" class="right carousel-control" id="carousel-control">›</a>
                </div>
                <!--.Carousel-->
            </div>
        </div>
    </div>
    <!--.container-->
    <script type="text/javascript">
    $(document).ready(function() {
        $('#Carousel').carousel({
            interval: 5000
        })
    });
    </script>
    <!--END OF VIDEO CAROUSEL-->
</body>
</html>

我把类名改为id，因为它和前面的carousel重叠了。即使这样做了，第二个carousel也和它前面的元素重叠了，右导航箭头也没有出现。
我查看了以下链接：有没有可能在一个页面上有多个Twitter Bootstrap轮播？
这里它说导航href应该指向不同的id，我已经这样做了。但是我仍然得到这个问题。
我哪里做错了？

twitter-bootstrap

3条答案

按热度按时间
uoifb46i

uoifb46i1#

最后一次编辑好了，我在第二个旋转木马的缩略图中添加了旋转木马功能。：）

第一个

赞(0）分享  回复(0）举报  2022-12-07
rta7y2nd

rta7y2nd2#

**更新3：**在这里，非常肯定这是你想要的，你需要复制所有的代码到你自己的服务器上，它应该工作！：）

第一个

赞(0）分享  回复(0）举报  2022-12-07
bpzcxfmw

bpzcxfmw3#

您可以只改变旋转木马ID，使这些滑块唯一。请参阅所附的代码作为一个例子。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>



<!-- Carousel -->
<div id="demo1" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo1" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo1" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo1" data-bs-slide-to="2"></button>
  </div>
  
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
    </div>
  </div>
  
  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo1" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo1" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>


<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
    </div>
  </div>
  
  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

</body>
</html>
赞(0）分享  回复(0）举报  2022-12-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com