.team__slider-character {
display: flex;
width: 100%;
height: 160px;
margin-top: 98px;
& .slick-slider.slick-initialized {}
& .slick-slider.slick-dotted {}
& .slick-list {
width: 500px;
height: 160px;
margin: 0 auto;
overflow: hidden;
}
& .slick-track {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1920px;
height: 160px;
margin: 0 auto;
&.slick-slide {
min-width: 100px;
min-height: 100px;
transition: 300ms ease-out;
}
& .slick-active {
transition: 300ms ease-out;
}
& .slick-current {}
& .slick-center {
width: 160px;
height: 160px;
transition: 300ms ease-out;
}
& .slick-cloned {}
}
& .slick-arrow {}
& .slick-prev {}
& .slick-next {}
& .slick-disabled {}
& .slick-dots {}
& .slick-dots li {}
& .slick-dots li.slick-active {}
& .slick-dots li button {}
}
.avatar {
width: 100px;
height: 100px;
max-width: 160px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.team__sophie-turner-copy {
background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-one {
background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-two {
background-image: url(../img/SophieTurner.png);
}
.team__sophie-turner-three {
background-image: url(../img/SophieTurner.png);
}
<section class="team">
<div class="team__title"><h2 class="title">Our Team</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p></div>
<div class="team__slider-character">
<div class="avatar team__sophie-turner-one"></div>
<div class="avatar team__sophie-turner-two"></div>
<div class="avatar team__sophie-turner-three"></div>
<div class="avatar team__sophie-turner-copy"></div>
</div>
<div class="team__slider-text"></div>
</section>
$(document).ready(function() {
$('.team__slider-character').slick({
arrows:false,
slidesToShow: 3,
slidesToScroll: 3,
dots: false,
focusOnSelect: true,
centerMode: true,
centerPadding: '30px',
variableWidth: true,
variableHeight: true,
infinite: true,
})
});
Очень надоел slick, куча багов и недопонятков, застрял на том что не могу сделать плавный переход на следующий слайд, или вообще убрать lock на прокрутку (slidesToShow заблокирован centerMode'ом).
Прошу помочь советами по чистке кода и еще одной проблеме: как подключить lazy-load к before с background-image? Или же, например, сделать так что бы картинка не подгружалась каждый новый раз, буду очень признателен.
.testimonals__comments {
& #JohnDoe:before {
content: url(../img/doe.png);
position: absolute;
top: 47.5px;
left: -110px;
}
& #Khalessi:before {
content: url(../img/lessi.png);
position: absolute;
top: 47.5px;
left: -110px;
}
& #Doe:before {
content: url(../img/doe.png);
position: absolute;
top: 47.5px;
left: -110px;
}
& #Lessi:before {
content: url(../img/lessi.png);
position: absolute;
top: 47.5px;
left: -110px;
}
}
.comment {
position: relative;
width: 350px;
height: 160px;
padding: 28px 64px 32px 30px;
border-radius: 5px;
box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.15);
background-color: #ffffff;
& h3 {
font-size: 18px;
font-weight: bold;
line-height: 1.39;
color: #061e37;
margin-bottom: 10px;
}
& p {
line-height: 1.67;
color: #78909c;
font-style: italic;
}
}
.testimonals__comments { // .slick-slider
position: relative;
& .slick-slider.slick-initialized {}
& .slick-slider.slick-dotted {}
& .slick-list {
display: flex;
width: 760px;
max-height: 405px;
flex: 1 1 60%;
justify-content: flex-end;
overflow: hidden;
& .slick-track {
display: flex;
width: 650px;
flex-direction: column;
user-select: none;
& .slick-slide {
max-width: 650px;
height: 160px;
margin: 0 0 70px;
& .slick-active {}
& .slick-current {}
& .slick-center {}
& .slick-cloned {}
}
}
}
& .slick-arrow {
position: relative;
left: 50%;
display: flex;
font-size: 0;
width: 25px;
height: 15px;
margin-left: 35px;
cursor: pointer;
}
& .slick-prev {
margin-bottom: 32px;
background: url(../img/arrowUp.png) no-repeat center;
}
& .slick-next {
margin-top: 17px;
background: url(../img/arrowDown.png) no-repeat center;
}
& .slick-disabled {}
& .slick-dots {}
& .slick-dots li {}
& .slick-dots li.slick-active {}
& .slick-dots li button {}
}
$(document).ready(function() {
$('.testimonals__comments').slick({
arrows:true,
vertical: true,
verticalSwiping: true,
slidesToShow: 2,
lazyLoad: 'ondemand',
variableHeight: false,
infinite: true,
});
});
Простой
