Как создать временную карусель с бутстрапом с линиями и кругами - PullRequest
Новая
       71

Как создать временную карусель с бутстрапом с линиями и кругами

0 голосов
/ 01 февраля 2019

Я создаю временную карусель, как показано ниже.

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

1 Ответ

0 голосов
/ 01 февраля 2019

Ниже приведен пример, который вы хотите .. Пожалуйста, посмотрите ... :) и проверьте эту ссылку: 

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