Question

伙计们正试图用3个背景图片制作轮播。当转盘滑动时，必须显示其他图像。发生的是，只有第一个图像出现，而其余的则没有，尽管滑块会显示背景颜色，而不是背景图像。

所以我需要所有背景图片都出现

谢谢！

HTML代码

 <div class="slider">
    <div id="main-slider" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <h1>We are an independent <br>design and <span>development</span><br> agencey.</h1>
            <div class="overlay"></div>
            <div class="carousel-item active"></div>
            <div class="carousel-item"></div>
            <div class="carousel-item"></div>
        </div>
    </div>
</div>

CSS代码

         .slider {
            background-color: #ddd;
        }
        .carousel-indicators li {
            width: 14px;
            height: 14px;
            padding: 0px;
            cursor: pointer;
            background: none;
            border-radius: 50%;
            border: 2px solid #fff;
        }
        .carousel-indicators li:hover {
            background: #fff;
        }
        .slider .carousel-inner {
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .carousel-inner h1 {
            z-index: 3;
            left: 4rem;
            color: #fff;
            line-height: 1.4;
            max-width: 800px;
            font-size: 4.2rem;
            position: absolute;
        }
        .carousel-inner h1 > span {
            padding: 0 1rem;
            background-color: #ed1d24;
        }
        .slider .overlay {
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .slider .carousel-item:nth-child(1) {
            background: url(../images/slider_001.jpg) no-repeat center center;
            background-size: cover; 
        }
        .slider .carousel-item:nth-child(2) {
            background: url(../images/slider_002.jpeg) no-repeat center center;
            background-size: cover; 
        }
        .slider .carousel-item:nth-child(3) {
            background: url(../images/slider_006.jpeg) no-repeat center center;
            background-size: cover; 
        }

Answer 1

1）请勿将 div 与 carousel-item 一起使用，以使用任何其他html元素，直到通过div计算得出您可以使用例如

2）在CSS中设置高度轮播项目

3）使用 nth-of-type 代替 nth-child

click here: https://codepen.io/anon/pen/JmyVoX

bootstrap 4轮播图片未出现（包含重叠）

1 个答案: