Общий вопрос по организации работы слайдера
Здравствуйте только начинаю верстать и набираться опыта, есть приведенная ниже секция учебного лендинга, она организована ввиде слайдера, полосочки слева секции явно указывают на это, посему мне пока на сто процентов неясно что пролистывают такого типа слайдеры бекграунд или контентную часть с заголовком OUR SERVICES.Вопрос наверно больше к опытному верстальщику который уже верстал подобного рода ситуации. Буду благодарен за подробный ответ что как куда в каком направлении верстать.
Ответы (1 шт):
Автор решения: MoloF
→ Ссылка
JSFIDDLE (SASS)
Код не претендует на решение вашего вопроса, я лишь давно выполнял в целях самообучения данный лендинг и он остался ненужным.
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap");
#our-services {
margin-top: 148px;
background-color: #202020;
overflow: hidden;
}
#our-services .left-block {
padding-right: 80px;
z-index: 1;
}
#our-services h2 {
color: #f4f5f9;
margin-top: 154px;
margin-bottom: 78px;
}
#our-services h5 {
color: #e74c3c;
font-size: 18px;
line-height: 29px;
text-transform: uppercase;
font-weight: 600;
}
#our-services p {
color: #999999;
line-height: 29px;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
font-size: 14px;
margin-bottom: 0;
min-height: 58px;
}
#our-services i {
position: absolute;
left: 100%;
top: 50%;
transform: translate(50%, -50%) !important;
width: 64px;
height: 64px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #f4f5f9;
z-index: 1;
border-radius: 50%;
font-size: 25px;
}
#our-services i:after {
position: absolute;
content: "";
left: -4px;
top: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.25);
}
#our-services i:before {
z-index: 1;
position: relative;
}
#our-services .block {
margin-bottom: 68px;
}
#our-services .block:last-child {
margin-bottom: 142px;
}
#our-services .image {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#our-services .carousel-indicators {
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
margin: 0;
right: auto;
display: flex;
flex-direction: column;
}
#our-services .carousel-indicators li {
width: 1px;
height: 34px;
margin: 0;
padding: 10px;
position: relative;
background-color: transparent;
}
#our-services .carousel-indicators li:after {
display: block;
content: "";
background-color: #999999;
opacity: 0.25;
width: 1px;
height: 34px;
}
#our-services .carousel-indicators li.active:after {
background-color: #e74c3c;
opacity: 1;
width: 2px;
}
#our-services .carousel .carousel-inner {
overflow: visible;
}
#our-services .carousel .carousel-inner .carousel-item {
visibility: hidden;
margin: 0;
display: block;
float: none;
position: absolute;
}
#our-services .carousel .carousel-inner .carousel-item .row .image {
opacity: 0;
transform: translateX(50px);
}
#our-services .carousel .carousel-inner .carousel-item .row .row * {
opacity: 0;
transform: translateX(-50px);
}
#our-services .carousel .carousel-inner .carousel-item.active {
position: relative;
visibility: visible;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .image {
opacity: 1;
transform: translateX(0);
transition: opacity 1s, transform 1s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row * {
opacity: 1;
transform: translateY(0);
transition: opacity 1s, transform 1s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(1) {
transition-delay: 0.15s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(2) {
transition-delay: 0.3s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(3) {
transition-delay: 0.45s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(4) {
transition-delay: 0.6s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(5) {
transition-delay: 0.75s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(6) {
transition-delay: 0.9s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(7) {
transition-delay: 1.05s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(8) {
transition-delay: 1.2s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(9) {
transition-delay: 1.35s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(10) {
transition-delay: 1.5s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(11) {
transition-delay: 1.65s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(12) {
transition-delay: 1.8s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(13) {
transition-delay: 1.95s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(14) {
transition-delay: 2.1s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(15) {
transition-delay: 2.25s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(16) {
transition-delay: 2.4s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(17) {
transition-delay: 2.55s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(18) {
transition-delay: 2.7s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(19) {
transition-delay: 2.85s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(20) {
transition-delay: 3s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(21) {
transition-delay: 3.15s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(22) {
transition-delay: 3.3s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(23) {
transition-delay: 3.45s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(24) {
transition-delay: 3.6s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(25) {
transition-delay: 3.75s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(26) {
transition-delay: 3.9s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(27) {
transition-delay: 4.05s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(28) {
transition-delay: 4.2s;
}
#our-services .carousel .carousel-inner .carousel-item.active .row .row *:nth-child(29) {
transition-delay: 4.35s;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="our-services">
<div id="our-services-carousel" class="carousel">
<ol class="carousel-indicators">
<li data-target="#our-services-carousel" data-slide-to="0" class="active"></li>
<li data-target="#our-services-carousel" data-slide-to="1"></li>
<li data-target="#our-services-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner text-right">
<div class="carousel-item active">
<div class="row m-0">
<div class="offset-2 col-5 left-block" data-aos="fade-right">
<div class="row">
<div class="col-12 subject">
<h2 class="right">OUR SERVICES</h2>
</div>
<div class="col-12 block">
<h5>WEB DESIGN</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
Lorem Ip sum has been the industry's standard dummy text ever.</p>
<i class="fa fa-desktop"></i>
</div>
<div class="col-12 block">
<h5>PRINT DESIGN</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
<i class="fa fa-paste"></i>
</div>
<div class="col-12 block">
<h5>PHOTOGRAPHY</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
Lorem Ip sum has been the industry's standard dummy text ever.</p>
<i class="fa fa-camera-retro"></i>
</div>
</div>
</div>
<div class="col-5 pl-0" data-aos="fade-left">
<div class="image" style="background-image: url('https://i.picsum.photos/id/235/1920/1080.jpg?hmac=ROW5aZTfUGyIqeRXNdx6Q5QY3ZpMTm0mqSSkSj2GiXw')"></div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row m-0">
<div class="offset-2 col-5 left-block">
<div class="row">
<div class="col-12 subject">
<h2 class="right">OUR SERVICES</h2>
</div>
<div class="col-12 block">
<h5>WEB DESIGN</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
Lorem Ip sum has been the industry's standard dummy text ever.</p>
<i class="fa fa-desktop"></i>
</div>
<div class="col-12 block">
<h5>PRINT DESIGN</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.</p>
<i class="fa fa-paste"></i>
</div>
<div class="col-12 block">
<h5>PHOTOGRAPHY</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
Lorem Ip sum has been the industry's standard dummy text ever.</p>
<i class="fa fa-camera-retro"></i>
</div>
</div>
</div>
<div class="col-5 pl-0">
<div class="image"
style="background-image: url('assets/images/Put_Your_Image.png')"></div>
</div>
</div>
</div>
</div>
</div>
</div>