05.08.2017, 18:11
|
|
Интересующийся
|
|
Регистрация: 01.07.2017
Сообщений: 19
|
|
jQuery+slick slider = куча проблем
Привет, друзья. Делаю слайдер. Что должно получиться (не лагает когда всего один комментарий):
Что получается:
Код 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;
}
}
}
}
}
}
} |
Последний раз редактировалось Prolific, 05.08.2017 в 18:18.
|
|
05.08.2017, 18:18
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Prolific,
Молодец, теперь мы в курсе что ты делаешь слайдер, а тему зачем создал?
|
|
05.08.2017, 18:34
|
|
Интересующийся
|
|
Регистрация: 01.07.2017
Сообщений: 19
|
|
Сообщение от Rise
|
Prolific,
Молодец, теперь мы в курсе что ты делаешь слайдер, а тему зачем создал?
|
Слайдер не работает как надо. Надеюсь найти тут помощи
|
|
05.08.2017, 18:42
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Prolific,
Что не так, зачем скрин всего экрана куда смотреть, глаза разбегаются, убери лишнее?
|
|
05.08.2017, 18:47
|
|
Интересующийся
|
|
Регистрация: 01.07.2017
Сообщений: 19
|
|
Сообщение от Rise
|
Prolific,
Что не так, зачем скрин всего экрана куда смотреть, глаза разбегаются, убери лишнее?
|
Я выделил слайлер синим цветом. Это контейнер .comments На первой картинке я показал как он должен стоять. На второй показал, что все съехало по непонятной причине (см. горизонтальный скролл). Не знаю как еще объяснить. Что конкретно не понятно?
|
|
05.08.2017, 18:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Prolific,
а почему css такой странный?
|
|
05.08.2017, 18:55
|
|
Интересующийся
|
|
Регистрация: 01.07.2017
Сообщений: 19
|
|
Сообщение от рони
|
Prolific,
а почему css такой странный?
|
SASS, извиняюсь
|
|
05.08.2017, 19:04
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Prolific,
SASS не будет работать сам по себе, его нужно компилировать в CSS.
|
|
05.08.2017, 19:14
|
|
Интересующийся
|
|
Регистрация: 01.07.2017
Сообщений: 19
|
|
Сообщение от Rise
|
Prolific,
SASS не будет работать сам по себе, его нужно компилировать в CSS.
|
Я его компилирую в CSS. Могу сам CSS файл скинуть если так понятнее будет в чем причина.
|
|
05.08.2017, 19:34
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Prolific,
Берешь пример использования с офсайта плагина и начинаешь плавно его модифицировать с проверкой на каждом этапе, какие проблемы, а так тяп-ляп, возьму разметку и стили с одного места и воткну в другое, никто не делает, и тем более мало найдется желающих в этих тяп-ляпах разбираться.
Последний раз редактировалось Rise, 05.08.2017 в 19:44.
|
|
|
|