Question

我在bootstrap 4中创建了一个带自定义控件的轮播。我已经设法根据自定义控件滑动旋转木马。现在我面临的问题是它没有在主动控制上显示活动类。

这是我的Bootstrap 4 Carousel HTML代码：

<div id="introslider" class="carousel slide" data-ride="carousel">
                    <div class="control">
                        <a class="btn btn-control active" href="#introslider" data-slide-to="0">Welcome</a>
                        <a class="btn btn-control" href="#introslider" data-slide-to="1">Test </a>
                        <a class="btn btn-control" href="#introslider" data-slide-to="2">Test 2</a>
                    </div>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Welcome</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Test</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Test 2</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>

这是我的CSS：

#introslider {
    margin-bottom: 50px;
}
#introslider .carousel-caption p {
    text-align: left;
}
#introslider .carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 20px;
    height: 100%;
}

#introslider .control {
    position: absolute;
    top: 0;
    right: 0;
}

#introslider .carousel-inner {
    position: static;
}

#introslider .carousel-item {
    margin-top: 45px;
}

结果如下：

你们有什么想法我怎么能让它发挥作用？

Answer 1

此代码可以帮助您。

#introslider {
    margin-bottom: 50px;
}
#introslider .carousel-caption p {
    text-align: left;
}
#introslider .carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 20px;
    height: 100%;
}

#introslider .control {
    position: relative;
    top: 0;
    right: 0;
    justify-content: flex-end;
    margin-right: 0;
}

#introslider .carousel-inner {
    position: static;
}

#introslider .carousel-item {
    margin-top: 45px;
}

#introslider .control .btn.active {
  background: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div id="introslider" class="carousel slide" data-ride="carousel">
                    <div class="control carousel-indicators">
                        <a class="btn btn-control active" href="#introslider" data-slide-to="0">Welcome</a>
                        <a class="btn btn-control" href="#introslider" data-slide-to="1">Test </a>
                        <a class="btn btn-control" href="#introslider" data-slide-to="2">Test 2</a>
                    </div>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Welcome</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Test</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Test 2</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>

自定义bootstrap轮播控件的.active类

1 个答案: