个人中心
gpt4 book ai didi

html - 如何使用带有线条和圆圈的 Bootstrap 创建时间轴轮播

转载 作者：太空宇宙 更新时间：2023-11-04 06:32:53 39 4
gpt4 key购买 nike

我正在创建时间轴轮播，如下所示。

enter image description here

所以当我们点击下一个或上一个按钮时，它应该移动到下一个存档年和下一个存档面板。

例如，如果我点击 2018，2018 圆圈应该突出显示，2018 面板应该显示在下面。

这是我尝试过但无法按预期创建的内容。

<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">2019</li>
        <li data-target="#carousel-example-generic" data-slide-to="1">2018</li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!--<div class="box"></div>-->
            <!--<div class="carousel-caption">
                <h3>First Text</h3>
            </div>-->
            <div class="panel-group" id="accordion">
                <!-- First Panel -->
                <div class="panel panel-default">
                    <div class="panel-heading heading-background">
                        <h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">
                          2019
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <p>
                                Archive 1
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <!--<div class="box"></div>
            <div class="carousel-caption">
                <h3>Second Text</h3>
            </div>-->
            <div class="panel-group" id="accordion">
                <!-- First Panel -->
                <div class="panel panel-default">
                    <div class="panel-heading heading-background">
                        <h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true">
                            2018
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <p>
                                Archive 2
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" data-target="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" data-target="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div> <!-- Carousel -->

CSS

.heading-background {
    background-color: rgba(45,175,220,0.8) !important; /* Sample Blue 2*/
}


/*Carousel Start*/
.carousel-indicators .active {
    background-color: orange;
}

.carousel-indicators li {
    border: 1px solid black;
}

.carousel-control {
    width:5%;
}
/*Carousel End*/

最佳答案

下面是您想要的示例。请看一下...:)还要检查此链接:

https://www.codeply.com/go/tBbcVXe1xZ

#myCarousel .list-inline {
    white-space:nowrap;
    overflow-x:auto;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
}

#myCarousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
}

#myCarousel .carousel-indicators > li.active img {
    opacity: 0.7;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <div class="container">

        <!-- main slider carousel -->
        <div class="row">
            <div class="col-lg-8 offset-lg-2" id="slider">
                    <div id="myCarousel" class="carousel slide">

 <!-- main slider carousel nav controls -->
    
    
 <ul class="carousel-indicators list-inline">
        <li class="list-inline-item active">
            <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=one" class="img-fluid">
            </a>
        </li>
        <li class="list-inline-item">
            <a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=two" class="img-fluid">
            </a>
        </li>
        <li class="list-inline-item">
            <a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=three" class="img-fluid">
            </a>
        </li>
        <li class="list-inline-item">
            <a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=four" class="img-fluid">
            </a>
        </li>
        <li class="list-inline-item">
            <a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=five" class="img-fluid">
            </a>
        </li>
        <li class="list-inline-item">
            <a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=six" class="img-fluid">
            </a>
        </li>
        <li class="list-inline-item">
            <a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=seven" class="img-fluid">
            </a>
        </li>
        <li class="list-inline-item">
            <a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
                <img src="http://placehold.it/80x60&amp;text=eight" class="img-fluid">
            </a>
        </li>
    </ul>

                        <!-- main slider carousel items -->
                        <div class="carousel-inner">
                            <div class="active item carousel-item" data-slide-number="0">
                                <img src="http://placehold.it/1200x480&amp;text=one" class="img-fluid">
                            </div>
                            <div class="item carousel-item" data-slide-number="1">
                                <img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
                            </div>
                            <div class="item carousel-item" data-slide-number="2">
                                <img src="http://placehold.it/1200x480&amp;text=three" class="img-fluid">
                            </div>
                            <div class="item carousel-item" data-slide-number="3">
                                <img src="http://placehold.it/1200x480&amp;text=four" class="img-fluid">
                            </div>
                            <div class="item carousel-item" data-slide-number="4">
                                <img src="http://placehold.it/1200x480&amp;text=five" class="img-fluid">
                            </div>
                            <div class="item carousel-item" data-slide-number="5">
                                <img src="http://placehold.it/1200x480&amp;text=six" class="img-fluid">
                            </div>
                            <div class="item carousel-item" data-slide-number="6">
                                <img src="http://placehold.it/1200x480&amp;text=seven" class="img-fluid">
                            </div>
                            <div class="item carousel-item" data-slide-number="7">
                                <img src="http://placehold.it/1200x480&amp;text=eight" class="img-fluid">
                            </div>
    
                            <a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                            <a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    
                        </div>
                       
                </div>
            </div>
    
        </div>
        <!--/main slider carousel-->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  </body>
</html>

关于html - 如何使用带有线条和圆圈的 Bootstrap 创建时间轴轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54480046/

39 4 0
文章推荐： java - 如何有效地实现 2D 游戏的碰撞？
文章推荐： java - JAVA从字母表的相反端找到对应的字母并递归地从字符串中删除
文章推荐： java - 从现有数组中创建新数组错误
文章推荐： java - 无法使用 TestNG Selenium 实例化类
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com