[Prolific]

Привет, друзья. Делаю слайдер. Что должно получиться (не лагает когда всего один комментарий):


Что получается:


Код html:

<div class="comments_wrap">
	<div class="comments_content">
		<div class="comment_arrow_prev">
			<i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>
		</div>
		<div class="comments">
			<div class="comment_item">
				<div class="comment_img"></div>
				<div class="comment_inform">
					<div class="comment_text">"1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, sit suscipit numquam libero adipisci, vitae aspernatur fuga eius odio veniam."</div>
					<div class="comment_head">
						<span>Jon Dee</span>
					</div>
				</div>
			</div>
			<div class="comment_item">
				<div class="comment_img"></div>
				<div class="comment_inform">
					<div class="comment_text">"2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, sit suscipit numquam libero adipisci, vitae aspernatur fuga eius odio veniam."</div>
					<div class="comment_head">
						<span>Jon Dee</span>
					</div>
				</div>
			</div>
			<div class="comment_item">
				<div class="comment_img"></div>
				<div class="comment_inform">
					<div class="comment_text">"3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, sit suscipit numquam libero adipisci, vitae aspernatur fuga eius odio veniam."</div>
					<div class="comment_head">
						<span>Jon Dee</span>
					</div>
				</div>
			</div>
		</div>
		<div class="comment_arrow_next">
			<i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
		</div>
	</div>
</div>

Код JS:

$('.comments').slick({
		arrows: false
	});

Код CSS:

.comments_wrap {
	margin-top: 100px;
	background-color: #f8f8f8;
	display: flex;
	justify-content: center;
	.comments_content {
		display: flex;
		justify-content: center;
		flex-basis: 80%;
		.comment_arrow_prev, .comment_arrow_next {
			background-color: red;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #ccc;
		}
		.comment_arrow_prev {
			padding: 0 50px 0 10px;
		}
		.comment_arrow_next {
			padding: 0 10px 0 50px;
		}
		.comments {
			background-color: blue;

			padding: 60px 0;			
			.comment_item {
				display: flex;
				.comment_img {
					margin-right: 40px;
					background: url('/img/we_do_comments.png') center center no-repeat;
					background-size: 50%;
					height: 80px;
					width: 100px;
					border: 2px solid #95e1d3;
				}
				.comment_inform {

					.comment_text {
						text-align: left;
						@extend .roboto;
						font-style: italic;
						color: #999;
					}
					.comment_head {
						text-align: left;
						margin-top: 15px;
						span {
							@extend .kaushan;
							color: #333;
						}
						span:before {
							content: '';
							display: inline-block;
							vertical-align: middle;
							box-sizing: border-box;
							width: 60px;
							height: 3px;
							background-color: #f38181;
							// border: solid transparent;
							// border-width: 0 0px;
							margin-right: 10px;
						}
					}
				}
			}
		}
	}
}