Bootstrap carousel background-image не работает

155

23 сентября 2018, 15:10

Есть страница index.php каторому подключается <?php include 'pages/carouselbootstrap.php'; ?> bootstrap карусель .Есть проблема не рабоатет background-image для обшего фона каруселья. Вот код .Помогите разобратся .Заранее спасибо

carouselbootstrap.php

<div id="carouselExampleControls" class="carousel slide " data-ride="carousel">
  <div class="carousel-inner background">
    <div class="carousel-item active">
      <h1>XJ</h1>
     </br>
    <a href="#" class="link">More Info</a>
    </div>
    <div class="carousel-item">
       <h1>XK</h1>
       </br>
       <a href="#" class="link">More Info</a>
    </div>
    <div class="carousel-item">
       <h1>XF</h1>
      </br>
      <a href="#" class="link">More Info</a>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Стили для каруселя

<style type="text/css">
.carousel.slide{
    min-width:100%;
    margin: 0;
    padding: 0;
}
.carousel-inner.background{
    width:100%;
    background-image: url('../images/jaguar.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.carousel-item{
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 10em 0 10em 0;
    height: auto;
}
.carousel-item >h1{
    color: white;
    font-size:5vh;
}
.carousel-item >a{
    color: white;
    text-decoration:none;
    font-size:2vh;
}

</style>

Answer 1

Проблема решена .Добавил !important и background:none; для carousel-item.

<section class="boostrapcarousel>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
     <h1>XJ</h1>
     </br>
    <a href="#" class="link">More Info</a>
    </div>
    <div class="carousel-item">
     <h1>XK</h1>
     </br>
    <a href="#" class="link">More Info</a>
    </div>
    <div class="carousel-item">
      <h1>XF</h1>
     </br>
    <a href="#" class="link">More Info</a>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</section>
<style tye="text/css">
.bootstrapcarousel{
    width: 100%;
    text-align: center;
    display: inline-block;
    margin: 0;
    padding: 0; 
}
.carousel.slide{
    min-width:100%;
    display: inline-block;
    text-align: center;
    padding: 0;
    margin: 0;
}
.carousel-inner{
    max-width:100%;
    display: inline-block;
    text-align: center;
    background-image: url('http://localhost/mysite/sites/site2/images/jaguar.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.carousel-item{
    width:100% !important;
    padding: 10em 0 10em 0;
    background:none !important;
}
</style>