Как сделать полноразмерный слайдер Bootstrap Carousel? - PullRequest
0 голосов
/ 30 октября 2018

Я использую Mobirise Website Builder и теперь пытаюсь выяснить, как сделать карусель Bootstrap полной ширины, как показано в этом примере: https://mobirise.com/bootstrap-carousel/

Я хочу, чтобы он был сверху и занимал только 50-60% экрана.

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

Вот HTML-код моей полноэкранной карусели Bootstrap:

<section class="carousel slide cid-r7XrvnwwpK" data-interval="false" id="slider1-3">

<div class="full-screen">
    <div class="mbr-slider slide carousel" data-pause="true" data-keyboard="false" data-ride="false" data-interval="false">
        <ol class="carousel-indicators">
            <li data-app-prevent-settings="" data-target="#slider1-3" class=" active" data-slide-to="0"></li>
            <li data-app-prevent-settings="" data-target="#slider1-3" data-slide-to="1"></li>
            <li data-app-prevent-settings="" data-target="#slider1-3" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item slider-fullscreen-image active" data-bg-video-slide="false" style="background-image: url(assets/images/1.jpg);">
                <div class="container container-slide">
                    <div class="image_wrapper">
                        <div class="mbr-overlay"></div><img src="assets/images/1.jpg">
                        <div class="carousel-caption justify-content-center">
                            <div class="col-10 align-center">
                                <h2 class="mbr-fonts-style display-1">FULL SCREEN SLIDER</h2>
                                <p class="lead mbr-text mbr-fonts-style display-5">Choose from the large selection of latest pre-made blocks - jumbotrons, hero images, parallax scrolling, video backgrounds, hamburger menu, sticky header and more.</p>
                                <div class="mbr-section-btn" buttons="0"><a class="btn btn-success display-4" href="https://mobirise.com">FOR WINDOWS</a> <a class="btn  btn-white-outline display-4" href="https://mobirise.com">FOR MAC</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item slider-fullscreen-image" data-bg-video-slide="https://www.youtube.com/watch?v=fwkKc6M60-0">
                <div class="mbr-overlay"></div>
                <div class="container container-slide">
                    <div class="image_wrapper"><img src="assets/images/2.jpg" style="opacity: 0;">
                        <div class="carousel-caption justify-content-center">
                            <div class="col-10 align-left">
                                <h2 class="mbr-fonts-style display-1">VIDEO SLIDE</h2>
                                <p class="lead mbr-text mbr-fonts-style display-5">Slide with youtube video background and color overlay. Title and text are aligned to the left.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><a data-app-prevent-settings="" class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#slider1-3"><span aria-hidden="true" class="mbri-left mbr-iconfont"></span><span class="sr-only">Previous</span></a><a data-app-prevent-settings="" class="carousel-control carousel-control-next" role="button" data-slide="next" href="#slider1-3"><span aria-hidden="true" class="mbri-right mbr-iconfont"></span><span class="sr-only">Next</span></a></div>
</div>

Это код CSS для слайдера карусели:

.cid-r7XrvnwwpK .full-screen .slider-fullscreen-image {
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.cid-r7XrvnwwpK .full-screen .slider-fullscreen-image.active {
  display: -o-flex;
}
.cid-r7XrvnwwpK .full-screen .container {
  width: auto;
  padding-right: 0;
  padding-left: 0;
}
.cid-r7XrvnwwpK .full-screen .carousel-item .container.container-slide {
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

1 Ответ

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

Установка и минимальная высота и высота на carousel-inner ...

.carousel-inner {
    height: 50vh;
    min-height: 400px;
}

https://www.codeply.com/go/Ey68z7gocR

...