Привет, друзья. Делаю слайдер. Что должно получиться (не лагает когда всего один комментарий):
Что получается:
Код 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;
}
}
}
}
}
}
} |
