JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<script src="//widget-feature.local" async></script>
<div class="swiper-container mySwiper swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="header__slide">
<h2 class="header__title">Прозрачность</h2>
<p class="header__info">Мы честны перед своими инвесторами: мы не гарантируем моментальную доходность в сотни процентов, но мы обещаем прибыль при долгосрочном сотрудничестве</p>
</div>
</div>
<div class="swiper-slide">
<div class="header__slide">
<h2 class="header__title">Страховка от убытков</h2>
<p class="header__info">Понимаем, что очень сложно переживать убытки.
Поэтому, если в первый год по Вашим позициям будет отрицательная доходность, то мы полностью покроем убытки и вернём Вам первоначальную сумму вложений.</p>
</div>
</div>
<div class="swiper-slide">
<div class="header__slide">
<h2 class="header__title">Всё под Вашем контролем</h2>
<p class="header__info">У инвесторов Plutos Invest всегда есть доступ ко всем совершенным сделкам. Таким образом мы обеспечиваем прозрачность деятельности нашего фонда.</p>
</div>
</div>
<div class="swiper-slide">
<h1 class="header__title big__title">Plutos Invest</h1>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
...
SCSS
// SWIPER
.big__title{
// margin: 0px 0px 100px 0px;
font-size: 64px;
}
.swiper-container {
width: 100%;
height: 100%;
padding: 100px 0px 65px 0px;
}
.swiper-wrapper{
align-items: flex-end;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 44%;
text-align: left;
}
.swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{
bottom: 17px;
top: auto;
width: 128px;
height: 3px;
right: 210px;
left: auto;
background: #fff;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
left: auto;
right: 0px;
}
.swiper-button-next, .swiper-button-prev{
top: auto;
bottom: 65px;
height: 40px;
width: 40px;
background-color: #fff;
}
.swiper-button-next::after{
font-size: 15px;
}
.swiper-button-prev::after{
font-size: 15px;
}
.swiper-button-prev{
right: 80px;
height: 40px;
width: 40px;
background-color: #fff;
}
.swiper-button-next.swiper-button-disabled::after, .swiper-button-prev.swiper-button-disabled::after{
color: #9B9CA3;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
opacity: 1;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
display: flex;
justify-content: flex-end;
align-items: center;
color: #fff;
bottom: 73px;
left: -200px;
...