Слайдер для перелистывания текста
Вложений: 1
Привет, по макету нужно создать слайдер с перелистыванием текста, но я не совсем пойму как это сделать. Подскажите пожалуйста.
<section id="said">
<div class="container">
<div class="title_works">
<h1><span>Clients</span> Said</h1>
<div class="titles_first">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque a aperiam tempore odit. Iusto.
</div>
</div>
<div class="slide">
<div class="first_slide">
<div class="circle"></div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis tempora atque velit optio vitae molestiae neque, perferendis sequi. Maiores beatae facere accusamus laboriosam vitae doloremque debitis voluptatibus cum expedita?"</p>
<img src="img/stars.png" alt="">
<h4><span>Kita Say,</span> HK Director</h4>
</div>
<div class="two_slide">
<div class="circle"></div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis tempora atque velit optio vitae molestiae neque, perferendis sequi. Maiores beatae facere accusamus laboriosam vitae doloremque debitis voluptatibus cum expedita?"</p>
<img src="img/stars.png" alt="">
<h4><span>Al Rayhan,</span> UX Director</h4>
</div>
</div>
</div>
</section>
Код:
#said{
background: #fff;
height: 823px;
}
.slide{
margin-top: 6px;
text-align: center;
}
.first_slide{
float: left;
height: 272px;
width: 531px;
background-color: #fff;
-webkit-box-shadow: 6px 7px 56px 5px rgba(0,0,0,0.21);
-moz-box-shadow: 6px 7px 56px 5px rgba(0,0,0,0.21);
box-shadow: 6px 7px 56px 5px rgba(0,0,0,0.21);
}
.circle{
margin: -50px auto;
width: 100px;
height: 100px;
background: white;
border-radius: 50px;
border: 1px solid #cdcdcd;
}
.first_slide p{
padding-top: 94px;
font-size: 16px;
font-weight: 400;
color: #585858;
}
.first_slide img{
padding-top: 20px;
}
.first_slide h4{
padding-top: 20px;
font-weight: 400;
}
.first_slide h4 span{
font-weight: 700;
}
.two_slide{
float: right;
height: 272px;
width: 531px;
background-color: #fff;
border: 1px solid #cdcdcd;
}
.circle{
margin: -50px auto;
width: 100px;
height: 100px;
background: white;
border-radius: 50px;
border: 1px solid #cdcdcd;
}
.two_slide p{
padding-top: 94px;
font-size: 16px;
font-weight: 400;
color: #585858;
}
.two_slide img{
padding-top: 20px;
}
.two_slide h4{
padding-top: 20px;
font-weight: 400;
}
.two_slide h4 span{
font-weight: 700;
}
|