Блог

Главная - Вопросы по программированию - я не могу изменить свою карусель на полноэкранный режим

я не могу изменить свою карусель на полноэкранный режим

#html #css

#HTML #css

Вопрос:

это код, я не могу сделать карусель полноэкранной, я использовал ширину 100%, но она не меняется, занимает весь экран, я использовал bootstrap в этом проекте, было бы полезно, если бы кто-нибудь мог мне помочь. Спасибо

 <html>
        <head>
                <link href="homepage.css" rel="stylesheet" type="text/css">
                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
                <style>
                    .container{
                        justify-content: center;
                        align-items: center;
                    }
                </style>
        </head>
        <body>
            <header>
                <div class="slide">
                <div class="container p-4">
                    <div class="w-100 h-50">
                        <div class="carousel slide" id="carouselExample" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
                                <li data-target="#carouselExample" data-slide-to="1"></li>
                                <li data-target="#carouselExample" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="roughslide1.jpg" alt="FIRST SLIDE" class="d-block w-100 h-100">
                                </div>
                                <div class="carousel-item">
                                    <img src="roughslide2.jpg" alt="SECOND SLIDE" class="d-block w-100 h-100">
                                </div>
                                <div class="carousel-item ">
                                    <img src="roughslide3.jpg" alt="THIRD SLIDE" class="d-block w-100 h-100">
                                </div>
                            </div>
                            <a href="#carouselExample" class="carousel-control-prev" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">PREVIOUS</span>
                            </a>
                            <a href="#carouselExample" class="carousel-control-next" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">NEXT</span>
                            </a>
                        </div>
                    </div>
                </div>
                </div>
            </header>
            <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
        </body>
    </html>

Ответ №1:

Ваша карусель находится внутри div с классом container . В контейнерах начальной загрузки по умолчанию есть, max-width это зависит от breakpoint .

 Breakpoint  container-width
xs         |           100%
sm         |           540px
md         |           720px
lg         |           960px
xl         |           1140px
  • Однако вы можете изменить его на container-fluid , чтобы избежать этого встроенного
    масштабирование containers .
  • Вы также добавили p-4 класс к своему container , я думаю, это намеренно, но добавите отступы с каждой стороны.

Вот документация.

Ответ №2:

carousel Наборы классов max-width Bootstrap и p-4 наборы padding классов, чтобы по бокам всегда оставалось место. Если вы избавитесь от этих классов, ваша карусель займет всю ширину (при условии, что это весь код, который у вас есть).

Ответ №3:

Измените класс контейнера на container-fluid, и это решит вашу проблему

Ответ №4:

Чтобы исправить ваш фрагмент, мне пришлось внести только два изменения:

сначала удалив ненужные <div class="container p-4"></div> и <div class="w-100 h-50"></div> , а затем я убедился, что изменил h-100 класс, который вы присваиваете img тегу, на vh-100 be, чтобы убедиться, что изображение заполняет страницу, и оно будет реагировать без каких-либо проблем. потому что он всегда будет принимать 100% высоту окна просмотра.

Вот ваш код с исправлением:

 <header>
    <div class="slide">
        <div class="carousel slide" id="carouselExample" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExample" data-slide-to="1"></li>
                <li data-target="#carouselExample" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="assets/images/image.jpg" alt="FIRST SLIDE" class="d-block w-100 vh-100">
                </div>
                <div class="carousel-item">
                    <img src="assets/images/image.jpg" alt="SECOND SLIDE" class="d-block w-100 vh-100">
                </div>
                <div class="carousel-item ">
                    <img src="assets/images/image.jpg" alt="THIRD SLIDE" class="d-block w-100 vh-100">
                </div>
            </div>
            <a href="#carouselExample" class="carousel-control-prev" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">PREVIOUS</span>
            </a>
            <a href="#carouselExample" class="carousel-control-next" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">NEXT</span>
            </a>
        </div>
    </div>
</header>

Кроме того, проверьте этот рабочий фрагмент, я надеюсь, что это может быть какой-либо помощью.

 <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="slider">
  <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>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
        <div class="overlay "> </div>
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
        <div class="overlay "> </div>
      </div>

    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>