Карусель на Slick slider с гигантской картинкой в центре
Нужно сделать карусель с огромной картинкой по центру и маленькими по бокам как на схеме:
Решил использовать Slick slider. У Slick есть соответствующий конфиг centerMode: true, который используется для похожих целей, есть достаточно много примеров использования. Центральная картинка увеличивается через CSS свойство: transform: scale();
Но... Максимальное значение scale(); которое можно поставить 1.5 при превышении этого порога и дальнейшем увеличении центральная картинка наезжает на соседние и в большом размере полностью их закрывает. Принудительное увеличение контейнера с центральной картинкой с помощью CSS свойства width приводит к тому, что центральное изображение уезжает в бок от центра - размеры и центрирование калькулируются скриптом Slick и заточены под единообразный размер изображений.
Как можно решить эту задачу c помощью Slick или посоветуйте другой скрипт галереи под эту задачу?
$(document).ready(function() {
$('.slider').slick({
centerMode: true,
centerPadding: '0px',
nextArrow: '.project__next',
slidesToShow: 5
});
});.slick-center img {
opacity: 1;
transform: scale(1.5);
}
.slick-slide img {
width: 80px;
height: 80px;
}
.slick-slide {
padding-top: 20px;
}
.slick-center {
padding-top: 0;
}
.project__next img{
width:50px;
height:20px;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
<div class="slider">
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>
<div class="project__next">
<span>Next</span><img src="http://www.clker.com/cliparts/B/5/C/M/6/i/right-grey-arrow.svg">
</div>Ответы (1 шт):
Поправить? Не проблема. Вот только посмотрев на одну лишь кашу стилей по умолчанию хочется взять того пейсателя за причинное место (голову) и ударить чем-нибудь посильнее.
Но что имеем, то и правим? Поехали. Для начала полностью "убьём" подключённые css, потому что бороться с ними бесполезно (огромное количество бессмысленного и устаревшего мусора, который !important-ом устанет рука перебивать) и напишем свои не нагружая ничем лишним (ну может капельку красоты.) Звучит может и жутко, но все куда проще.
$(document).ready(function() {
$('.slider').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 5
});
});.slider {
overflow: hidden;
}
.slick-list {
position: relative;
background-color: #e9e9e9;
}
.slick-slider .slick-track, .slick-slider .slick-list {
transform: translate3d(0, 0, 0);
}
.slick-track {
display: flex;
align-items: end;
padding-top: 20px;
height: 200px;
position: relative;
}
.slick-slide {
display: flex;
align-items: end;
justify-content: center;
}
.slider img {
width: 120px;
height: 80px;
object-fit: cover;
transform: scale(1);
transform-origin: center bottom;
}
.slick-center img {
transform: scale(2.2);
transition: all .5s;
position: relative;
z-index: 1;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="slider">
<div>
<img src="https://itproger.com/img/courses/x1476977488.jpg.pagespeed.ic.RdIpJiqNIr.jpg" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1512300872216-54ef7791f155?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=18b9a3e2bbc98783513eea4cb4b6b9bd&auto=format&fit=crop&w=600&q=60" alt="">
</div>
</div>P.S. к слову, куда проще этот свайпер переписать заново или воспользоваться чем-нибудь современным и проверенным, поскольку привести к виду как вы хотите вероятно всё равно не выйдет, ибо javascript отвечающий за размер контейнера и его перерасчёт всё равно решает. Может что-то и есть в его опциях, но выяснять это уже нет интереса (уж больно он кривой).