<div class="client_comment">
<div class="client_box">
<div class="client_img">
<img src="/img/avatar.png" alt="" class="avatar">
</div>
<p>This was my first time renting from car rental. The service rep help me find the best rental to suit my needs. I will definitely rent with this company again</p>
<div class="rang">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
<div class="avtor">
<span><b>Kita Say,</b> HK Director</span>
</div>
</div>
<div class="client_box">
<div class="client_img">
<img src="/img/avatar.png" alt="" class="avatar">
</div>
<p>This was my first time renting from car rental. The service rep help me find the best rental to suit my needs. I will definitely rent with this company again</p>
<div class="rang">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
<div class="avtor">
<span><b>Al Rayhan,</b> UX Director</span>
</div>
</div>
<div class="client_box">
<div class="client_img">
<img src="/img/avatar.png" alt="" class="avatar">
</div>
<p>This was my first time renting from car rental. The service rep help me find the best rental to suit my needs. I will definitely rent with this company again</p>
<div class="rang">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
<div class="avtor">
<span><b>Kita Say,</b> HK Director</span>
</div>
</div>
</div>
$(document).ready(function() {
$('.client_comment').slick({
infinite: true,
slidesToShow: 2,
dots: false,
prevArrow: '<div class="arrowleft"><i class="fas fa-angle-left"></i></div>',
nextArrow: '<div class="arrowleft"><i class="fas fa-angle-right"></i></div>',
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
centerMode:1
});
});
.client_title{
width: 100%;
margin-top: 140px;
display: -webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
justify-content: center;
-ms-align-items: content;
align-items: content;
justify-content: center;
text-align: center;
}
.client_title h3{
font-size: 50px;
line-height: 45px;
font-weight: 400;
padding: 10px;
}
.client_title span{
color: #fc6744;
}
.client_title p{
opacity: 0.5;
padding: 10px;
}
.client_comment{
margin: 80px 0 0 0;
width: auto;
}
.client_box{
/* max-width: 100%;*/
height: 271px;
box-shadow: 0 0 27px rgba(20, 20, 21, 0.09);
border-radius: 1px;
background-color: #ffffff;
display: block;
padding: 10px 15px;
margin: 0px 20px;
font-family: 'Source Sans Pro', sans-serif;
}
.slick-arrow{
/* display: flex;*/
/* position: absolute;*/
/* top:50%;*/
/* justify-content:center;*/
}
.avatar{
border-radius: 50%;
width: 100px;
height: 100px;
box-shadow: 0 0 0 rgba(20, 20, 21, 0.38);
background-color: #ffffff;
background-size: cover;
z-index: 99;
display: block;
}
.client_img{
display: flex;
justify-content: center;
position: relative;
bottom: 50px;
z-index: 99;
}
.arrowleft{
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 1px 3px 14px rgba(20, 20, 21, 0.08);
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 18px;
transition: 300ms;
}
.arrowleft:hover,.arrowleft:focus{
box-shadow: 1px 3px 14px rgba(20, 20, 21, 0.28);
background-color: #ff6e47;
color: #fff;
transition: 300ms;
}
.client_box p::before {
content: "“";
}
.client_box p::after {
content: "”";
}
.client_box p{
font-size: 17px;
line-height: 27px;
opacity: 0.7;
text-align: center;
padding: 0px 50px;
font-weight: 400;
}
Почему кнопки влево и в право не верно стоят, и аватарка обрезана, спасибо за выделенное время!
Простой
