Слайдеры и карусели на Bootstrap 4

Простой слайдер для сайта на всю ширину и высоту экрана с прозрачным фоном и центрованным контентом

HTML

    <div class="container-000 overlay-black">
        <div class="container-000-content">
            <a class="carousel-control-prev" href="#main-carousel" data-slide="prev">
			<span class="prev"><img src="assets/images/left.png" alt=""></span>
			</a>
			<a class="carousel-control-next" href="#main-carousel" data-slide="next">
			<span class="next"><img src="assets/images/right.png" alt=""></span>
			</a>

			<div id="main-carousel" class="carousel slide" data-ride="carousel">

			<ul class="carousel-indicators">
			<li data-target="#main-carousel" data-slide-to="0" class="active"></li>
			<li data-target="#main-carousel" data-slide-to="1"></li>
			<li data-target="#main-carousel" data-slide-to="2"></li>
			</ul>

			<div class="carousel-inner">

			<div class="carousel-item active">
			<div class="carousel-item__flexblock">
			<div class="carousel-caption">
			<p>СЛАЙД 1</p>
			</div> 
			</div>
			</div>

			<div class="carousel-item">
			<div class="carousel-item__flexblock">
			<div class="carousel-caption">
			<p>СЛАЙД 2</p>
			</div> 
			</div>
			</div>

			<div class="carousel-item">
			<div class="carousel-item__flexblock">
			<div class="carousel-caption">
			<p>СЛАЙД 3</p>
			</div> 
			</div>
			</div>

			</div>
			</div>
        </div>
    </div>

CSS

.container-000 {
    padding: 65px 0 0 0;}
.container-000-content {
	padding: 15px 10px 15px 10px;
	width: 100%;
	height: calc(100vh - 65px);
	margin: auto;
	display: flex;
    align-items: center;
    justify-content: center;}
#main-carousel div.carousel-item__flexblock {
    width: 1200px;
    height: calc(100vh - 65px);
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;}
#main-carousel div.carousel-caption {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}

Пример слайдера для сайта "Москонвейер"

HTML

	<div class="container-0011">
        <div class="container-0011-content">
            <a class="carousel-control-prev" href="#main-carousel" data-slide="prev">
			<span class="prev"><i class="fa-solid fa-arrow-left"></i></span>
			</a>
			<a class="carousel-control-next" href="#main-carousel" data-slide="next">
			<span class="next"><i class="fa-solid fa-arrow-right"></i></span>
			</a>

			<div id="main-carousel" class="carousel slide" data-ride="carousel">

			<ul class="carousel-indicators">
			<li data-target="#main-carousel" data-slide-to="0" class="active"></li>
			<li data-target="#main-carousel" data-slide-to="1"></li>
			<li data-target="#main-carousel" data-slide-to="2"></li>
			</ul>

			<div class="carousel-inner">

			<div class="carousel-item active" style="background-image: url(../assets/images/mainfon.jpg);">
    			<div class="carousel-item__flexblock">
        			<div class="carousel-caption">
            			<div class="container-001-content">
                            <div class="container-001__maintext wow fadeInSlow">
                                <p class="container-001__maintext-txt">ЛЕНТОЧНЫЙ КОНВЕЙЕР</p>
                            </div>
                            <div class="container-001__maintext">
                                <p class="container-001__maintext-txt wow fadeInSlow2">от 3000 руб/сутки</p>
                            </div>
                        </div>
        			</div> 
    			</div>
			</div>
			
			<div class="carousel-item" style="background-image: url(../assets/images/mainfon.jpg);">
    			<div class="carousel-item__flexblock">
        			<div class="carousel-caption">
            			<div class="container-001-content">
                            <div class="container-001__maintext wow fadeInSlow">
                                <p class="container-001__maintext-txt">ЛЕНТОЧНЫЙ КОНВЕЙЕР</p>
                            </div>
                            <div class="container-001__maintext">
                                <p class="container-001__maintext-txt wow fadeInSlow2">от 3000 руб/сутки</p>
                            </div>
                        </div>
        			</div> 
    			</div>
			</div>
			
			<div class="carousel-item" style="background-image: url(../assets/images/mainfon.jpg);">
    			<div class="carousel-item__flexblock">
        			<div class="carousel-caption">
            			<div class="container-001-content">
                            <div class="container-001__maintext wow fadeInSlow">
                                <p class="container-001__maintext-txt">ЛЕНТОЧНЫЙ КОНВЕЙЕР</p>
                            </div>
                            <div class="container-001__maintext">
                                <p class="container-001__maintext-txt wow fadeInSlow2">от 3000 руб/сутки</p>
                            </div>
                        </div>
        			</div> 
    			</div>
			</div>

			</div>
			</div>
			
	<div class="container-001__textblock wow fadeInRightBig">
                <p class="container-001__textblock-txt">
                    По вопросам приобретения продукции обращайтесь по телефонам
                </p>
                <a class="container-001__textblock-lnk" href="tel:+79265700100">+7(926)570-01-00</a><br>
            </div>
			
        </div>
	</div>

CSS

.container-0011 {
    padding: 115px 0 0 0;}
.container-0011-content {
    position: relative;
	padding: 0;
	width: 100%;
	height: 650px;
	margin: auto;
	display: flex;
    align-items: center;
    justify-content: center;}

.carousel {
    position: relative;
    width: 100%;}    
#main-carousel div.carousel-inner {
    position: relative;
    width: 100%;}    
#main-carousel div.carousel-item__flexblock {
    width: 1200px;
    height: 650px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;}
#main-carousel div.carousel-caption {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    left: 0;
    right: 0;}
#main-carousel div.carousel-item {
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: cover;}
.container-0011-content a.carousel-control-next, a.carousel-control-prev {
    opacity: 1;
    width: 70px;
    height: 100%;
    font-size: 40px;
    align-items: center;
    color: #ffffff;
    z-index: 90;}
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: start;
    padding-left: 0;
    margin-right: 3%;
    margin-left: 3%;
    list-style: none;}
.carousel-indicators li {
    background-color: #ffffff;
    border: 1px solid #0f9c3e;}
    
.container-001-content {
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 15px 10px 15px 10px;
    position: relative;}
.container-001__maintext {
    width: max-content;}
.container-001__maintext p.container-001__maintext-txt {
    margin: 20px 0px 20px 50px;
    font-family: AGForeignerBlackС;
    font-size: 50px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    padding: 20px;
    background-color: #000000;}
.container-001__textblock {
    position: absolute;
    bottom: -40px;
    right: 0;
    background-color: #0f9c3e;
    padding: 30px;}
.container-001__textblock p.container-001__textblock-txt {
    width: 250px;
    margin: 0 150px 20px 0;
    font-family: Arial;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;}
.container-001__textblock a.container-001__textblock-lnk {
    text-decoration: none;
    font-family: Arial;
    font-size: 31px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    transition: 0.5s;}
.container-001__textblock a.container-001__textblock-lnk:hover {
    color: #000000;
    transition: 0.5s;}