Блог

Главная - Вопросы по программированию - Загрузочный слайдер карусели работает некорректно

Загрузочный слайдер карусели работает некорректно

#html #css

#HTML #css

Вопрос:

Я работал над загрузочным слайдером карусели и изменил некоторый код, и теперь слайдер работает некорректно. Вначале он работал корректно, но когда я поместил свой код в CSS, он был остановлен.

Просто хочу сдвинуть картинку и текст. Положение текста не то же самое, потому что я изменил некоторый код начальной загрузки, но здесь исходный bootstrap, и это не имеет значения.

 .carousel-caption {
  top: 0 !important;
  left: 0 !important;
  width: 45%;
  max-width: 100vw;
  padding: 0 15%;
}

.carousel-caption .lead {
  text-align: left;
  position: absolute;
  top: 30vh;
  left:8vw;
  font-size: 30px;
  
}

.slide1-title {
  font-size: 45px;
} 

.btn-style-one {
  position: relative;
  padding: 14px 30px;
  line-height: 1em;
  background: #221f1f;
  margin-top: 20px;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  border: 2px solid transparent !important;
}

@media(max-width: 1300px){
  .slide1-title{
    font-size: 30px;
  }
 }

 @media(max-width: 1000px){
  .slide1-title{
    font-size: 25px;
  }
 }


@media(max-width: 768px){
 .carousel-caption .lead{
   font-size: 15px;
 }
 .slide1-title{
  font-size: 22px;
}

  .btn-style-one{
    position: relative;
    padding: 10px 25px;
    line-height: 1em;
    background: #221f1f;
    margin-top: 20px;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    border: 2px solid transparent !important;
}

}


@media(max-width: 500px){
  .carousel-caption {
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    max-width: 100vw;
    padding: 0 15%;
  }
  .carousel-caption .lead {
    text-align: center;
    position: absolute;
    top: 35vh;
    left:0vw;
  }
  .carousel-caption .lead{
    font-size: 20px;
  }
  .slide1-title{
   font-size: 25px;
 }

}
.red {
  color:red;
  
}

.bgcarousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lnr {
  display: inline-block;
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.05em;
  stroke-width: 1;
}

.services-icon {
  margin-bottom: 20px;
  font-size: 30px;
}
bgc2, .vLine, .hLine {
    background-color: #0F52BA;
}

.quote-icon {
  font-size: 40px;
  margin-bottom: 20px;
}
.services-icon {
    font-size: 60px;
    margin-left: 2rem;
}

    
    .slide1-content{
      font-size:18px;
    }     
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>                        
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <!-- Slide One - Set the background image for this slide in the line below -->
                        <div class="bgcarousel-item active" style="background-image: url('https://wallpaperplay.com/walls/full/6/9/8/60291.jpg')">
                            <div class="carousel-caption d-lg-block slide1-bg">                
                                <p class="lead slide1 slide1-content"><span class="slide1-title" style="text-transform: uppercase; font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span><br><br>
                                <i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </i><br>
                                <a href="#o-nama" class="btn btn-dark btn-style-one scroll-to-target" data-target="#o-nama">Button</a>
                            </div>
                        </div>  
                        <!-- Slide Two - Set the background image for this slide in the line below -->
                        <div class="carousel-item" style="background-image: url('http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.jpg')">
                            <div class="carousel-caption d-md-block">
                              <h2 class="display-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
                              <i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </i>
                            </div>
                          </div>
                        </div>                                                         
                    </div>  

                </div>

Комментарии:

1. извините, неясно, в чем ваша проблема

2. Слайдер не изменяет изображение и текст. Не при нажатии или автоматическом скольжении.

3. Я вижу, что вы загрузили только css-файл bootstrap. Вы также добавили файл js в свой проект? И еще, пожалуйста, найдите время, чтобы очистить свой код перед публикацией вопроса.

4. @MihaiT в этом случае OP не загрузил ни jQuery, ни bootstrap js, ни js-файл инициализации slick

5. @Vishwa почему гладкий? он использует boostrap carousel. смотрите пример здесь w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel

Ответ №1:

Вы переопределяете класс карусели начальной загрузки по умолчанию carousel-item с помощью bgcarousel-item . Просто добавьте carousel-item класс на первый слайд, и ваша проблема будет решена. Спасибо

 <div class="bgcarousel-item carousel-item active" style="background-image: url('https://wallpaperplay.com/walls/full/6/9/8/60291.jpg')">