Как сделать загрузочную карусель на полстраницы? - PullRequest
Новая
       10

Как сделать загрузочную карусель на полстраницы?

0 голосов
/ 16 июня 2019

Я хочу сделать эту половинку карусели Bootstrap 3, но я не вижу, что мне нужно изменить, чтобы это сделать. В маленьком окне это выглядит хорошо, но когда я расширяю окно до полного экрана, карусель буквально занимает всю страницу. Как сделать полустраницу карусели Bootstrap в полном окне?

Я пытался поместить его в заголовок, но это не сработало. 

<div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel">
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>
  <!--/.Indicators-->
  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="view">
        <img class="d-block w-100" src="write2.jpg"
          alt="First slide">
        <div class="mask rgba-black-light"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive">Light mask</h3>
        <p>First text</p>
      </div>
    </div>
    <div class="carousel-item">
      <!--Mask color-->
      <div class="view">
        <img class="d-block w-100" src="step21.jpg"
          alt="Second slide">
        <div class="mask rgba-black-strong"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive">Strong mask</h3>
        <p>Secondary text</p>
      </div>
    </div>
    <div class="carousel-item">
      <!--Mask color-->
      <div class="view">
        <img class="d-block w-100" src="read.jpg"
          alt="Third slide">
        <div class="mask rgba-black-slight"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive">Slight mask</h3>
        <p>Third text</p>
      </div>
    </div>
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
</div>

UPDATE! Карусель теперь находится на половинном экране, но с расширением окна изображения становятся все больше и больше. Я использовал CSS-код, как предложил пользователь, для создания карусели на полстраницы, но опять же, в качестве окна. расширяется, изображения увеличиваются. Как не получить изображения для увеличения при расширении окна? 

.carousel-inner{
    height: 50vh;
}


.item img{
    height: 100% !important;
    width:  100% !important;
}

1 Ответ

0 голосов
/ 16 июня 2019

Обновлено до Bootstrap 4 в соответствии с вашим jsFiddle, который вы упомянули в комментарии ниже 

    .carousel-item.active, .carousel-item .view {
      height: 50vh!important;
    }

    .carousel-item img {
      object-fit: cover;
      width:100%!important;
      height: 100% !important;
    }

    .content h1 {
      font-size: 55px;
    }

    @media screen and (max-width: 320px) {
      .content h1 {
        font-size: 30px;
      }
    }

    @media screen and (min-width: 321px) and (max-width: 768px) {
      .content h1 {
        font-size: 30px;
      }

      
    }

    .content h5 {
      font-size: 23px;
      margin-left: 80px;
      margin-right: 80px;
    }

    @media screen and (max-width: 320px) {
      .content h5 {
        font-size: 18px;
        margin-left: 20px;
        margin-right: 20px
      }

    }

    @media screen and (min-width: 321px) and (max-width: 768px) {
      .content h5 {
        font-size: 18px;
        margin-left: 20px;
        margin-right: 20px;
      }
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</head>

<body>

 <div class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #515151;">
    <a class="navbar-brand" href="homepage.html">Title</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
      aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
      </ul>


    </div>
  </nav>

  

    <div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel" style="height:50vh">
      <!--Indicators-->
      <ol class="carousel-indicators">
        <li data-target="#carousel1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel1" data-slide-to="1"></li>
        <li data-target="#carousel1" data-slide-to="2"></li>
      </ol>
      <!--/.Indicators-->
      <!--Slides-->
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <div class="view">
            <img  src="https://www.w3schools.com/bootstrap/la.jpg" alt="New york"
               alt="First slide">
            <div class="mask rgba-black-light"></div>
          </div>
          <div class="carousel-caption">
            <h3 class="h3-responsive">Light mask</h3>
            <p>First text</p>
          </div>
        </div>
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <img  src="https://www.w3schools.com/bootstrap/la.jpg" alt="New york"
              alt="Second slide">
            <div class="mask rgba-black-strong"></div>
          </div>
          <div class="carousel-caption">
            <h3 class="h3-responsive">Strong mask</h3>
            <p>Secondary text</p>
          </div>
        </div>
        <div class="carousel-item">
          <!--Mask color-->
          <div class="view">
            <img  src="https://www.w3schools.com/bootstrap/la.jpg" alt="New york"
               alt="Third slide">
            <div class="mask rgba-black-slight"></div>
          </div>
          <div class="carousel-caption">
            <h3 class="h3-responsive">Slight mask</h3>
            <p>Third text</p>
          </div>
        </div>
      </div>
      <!--/.Slides-->
      <!--Controls-->
      <a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      <!--/.Controls-->
    </div>
  </div>
</body>

</html>

Нижеследующее работает для Bootstrap 3 

.carousel-inner{
    height: 50vh;
}
.item.active{
  height: 50vh!important;
}
.item img{
 object-fit:cover;
 height:100%!important;
}
...