@jekanok

Почему Slick работает некорректно?

5b6d7f7002e92632172583.png
<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;
}

Почему кнопки влево и в право не верно стоят, и аватарка обрезана, спасибо за выделенное время!
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
UnluckySerivelha
@UnluckySerivelha
Потому что

.client_img{
  bottom: 50px;
}


Исправленные стрелочки:
https://codepen.io/UnluckySerivelha/pen/vavPzK
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы