загрузочные 4 изображения карусели не появляются (содержит оверлей) - PullRequest
Новая
       26

загрузочные 4 изображения карусели не появляются (содержит оверлей)

0 голосов
/ 13 октября 2018

парни пытаются сделать карусель с 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; 
        }

1 Ответ

0 голосов
/ 13 октября 2018

1) Не используйте div с carousel-item для использования любого другого html-элемента, пока он не будет рассчитан с элементами div, которые вы можете использовать, например,

2) Высота набора элемент карусели в css

3) Использовать тип nth вместо nth-child

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

...