При верстке лендинга столкнулась с таким слайдером. Конкретно интересует, как реализовать перемещение левого и правого слайда в центр? Ранее с подобными задачами не сталкивалась. Буду благодарна, если подскажете библиотеку или примерно суть реализации. Заранее спасибо!
-
Не совсем понял что нужно сделать. Возможно slick поможет kenwheeler.github.io/slick – Alexandr Maliovaniy 23 авг '18 в 16:18
-
при нажатии на правую кнопку слайд переходит из уменьшенного состояния в центр, как бы эффект 3D – Ирина Попова 23 авг '18 в 16:22
-
Библиотека - та какой-нибудь слайдер, например. А суть реализации - допустим, задать элементам слайдера абсолютное позиционирование (относительного самого слайдера), и просто перемещать их как Вам угодно. А там, стилями можно и увеличивать при перемещении. – Александр Коноплян 23 авг '18 в 16:27
добавить комментарий
|
2 ответа
Пример с slick-slider
$('.slider').slick({
slidesToShow:3,
centerMode:true,
centerPadding:0,
focusOnSelect:true
})
*{
box-sizing:border-box;
}
*:focus{
outline:none;
}
.slide:before{
content:'';
display:block;
min-height:100px;
background:radial-gradient(circle at center,yellow,orange);
opacity:.5;
transform-origin:center;
transform:scale(.6);
transition:all .5s ease;
}
.slide.slick-center:before{
opacity:1;
transform:scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<div class="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
let sliderArr = {};
let current = 0;
let max;
for (let i = 1; i < document.getElementById("slider").children.length - 1; i++) {
sliderArr[String(i)] = document.getElementById("slider").children[i];
if (document.getElementById("slider").children[i].classList.contains("active")) {
current = i;
}
max = i;
}
document.getElementsByClassName("arrowLeft")[0].onclick = function() {
if (current > 1) {
$(sliderArr[current]).animate({
height: '100px',
marginTop: '100px',
width: '100px'
});
$(sliderArr[current - 1]).animate({
height: '150px',
marginTop: '75px',
width: '150px'
});
current--;
}
}
document.getElementsByClassName("arrowRight")[0].onclick = function() {
if (current < max) {
$(sliderArr[current]).animate({
height: '100px',
marginTop: '100px',
width: '100px'
});
$(sliderArr[current + 1]).animate({
height: '150px',
marginTop: '75px',
width: '150px'
});
current++;
}
}
#slider {
float: left;
width: 430px;
height: 300px;
margin-left: 5%;
margin-right: 5%;
overflow: hidden;
user-select: none;
}
.arrow {
width: 40px;
height: 100%;
line-height: 300px;
font-size: 30px;
cursor: pointer;
text-align: center;
}
.arrowLeft {
float: left;
}
.arrowRight {
float: right;
}
.slide {
float: left;
width: 150px;
height: 150px;
background: #333;
margin-top: 75px;
}
.slide1 {
width: 100px;
height: 100px;
margin-top: 100px
}
.slide3 {
width: 100px;
height: 100px;
margin-top: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<div class="arrow arrowLeft">
<</div>
<img class="slide slide1">
<img class="slide slide2 active">
<img class="slide slide3">
<div class="arrow arrowRight">></div>
</div>
-
-
Конкретно интересует, как реализовать перемещение левого и правого слайда в центр активный слайд должен быть в центре – ThisMan 24 авг '18 в 9:21