Я пытаюсь сделать вертикальный слайдер изображения, который точно соответствует ширине слайдера.
Я сейчас много часов пытался заставить это работать, что-то, что я думаю, должно быть довольно простым, но я просто не могу понять, что я делаю неправильно, и мой мозг вот-вот растает. также думая, что я сделал это слишком сложным на данный момент.
Ползунок имеет ширину 548 пикселей и высоту 137 пикселей.
Изображения внутри слайдера имеют ширину 548 пикселей, разделенную на 2.
Скрипка ползунка
Как вы можете видеть ниже, ползунок перемещается немного больше, чем должен
Модуль JavaScript (Да, двигайтесь влево и двигайтесь вправо по-разному, потому что я тестировал много разных подходов.
Если я изменю правильную функцию на эту:
var horizontalMoveRight = function(wrapper) {
wrapper.scrollLeft += elemScroll;
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
elemMoved++;
}
};
Это почти сработает, но после нескольких щелчков все еще будет немного двигаться.
var horizontalSlider = (function() {
var slideParent;
var slideLeftButton;
var slideRightButton;
var slideInterval;
var slideTimer;
var elemScroll = 0;
var elemLength = 0;
var elemMove = 0;
var elemMoved = 0;
var lastMove = false;
var horizontalConstruct = function(parenElement, lButn, rButn, slidTimer, eleScroll) {
slideParent = parenElement;
slideLeftButton = document.querySelectorAll(lButn);
slideRightButton = document.querySelectorAll(rButn);
slideTimer = slidTimer;
elemScroll = eleScroll;
Array.from(slideLeftButton).forEach(elem => elem.addEventListener("click", horizontalClickLeft, false));
Array.from(slideRightButton).forEach(elem => elem.addEventListener("click", horizontalClickRight, false));
};
var horizontalClickLeft = function() {
clearInterval(slideInterval);
elemMoved = 0;
var wrapper = this.parentNode.querySelector(slideParent);
elemLength = wrapper.clientWidth;
elemMove = (elemLength - elemScroll) / elemScroll;
slideInterval = setInterval(function() {
horizontalMoveLeft(wrapper);
}, slideTimer);
};
var horizontalClickRight = function() {
clearInterval(slideInterval);
elemMoved = 0;
var wrapper = this.parentNode.querySelector(slideParent);
elemLength = wrapper.clientWidth;
elemMove = (elemLength - elemScroll) / elemScroll;
slideInterval = setInterval(function() {
horizontalMoveRight(wrapper);
}, slideTimer);
};
var horizontalMoveRight = function(wrapper) {
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
if (elemMoved + 1 > elemMove) {
lastMove = Number(((elemMove - elemMoved) * 10));
}
if (lastMove === false) {
wrapper.scrollLeft += elemScroll;
} else {
wrapper.scrollLeft += lastMove;
lastMove = false;
}
elemMoved++;
}
};
var horizontalMoveLeft = function(wrapper) {
wrapper.scrollLeft += -elemScroll;
if (elemMoved == elemMove || elemMoved > elemMove) {
clearInterval(slideInterval);
elemMoved = 0;
} else {
elemMoved++;
}
};
return {
horizontalConstruct: horizontalConstruct,
horizontalClickLeft: horizontalClickLeft,
horizontalClickRight: horizontalClickRight
};
})();
horizontalSlider.horizontalConstruct(".slideInner", ".slideLeftHorizontal", ".slideRightHorizontal", 7, 10);
.slideInner {
position: relative;
width: 548px;
height: 137px;
overflow: hidden;
display: flex;
}
.slideInner a,
.slideInner a img {
width: calc(548px / 2);
}
.slideRightHorizontal,
.slideLeftHorizontal {
position: absolute;
min-width: 45px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
.slideLeftHorizontal {
left: 0;
color: #fff;
}
.slideRightHorizontal {
right: 0;
color: #fff;
}
.overflowh {
overflow: hidden;
}
.slideT1M {
margin: 20px 0px;
border: 1px solid #000;
display: flex;
width: 548px;
position: relative;
}
<div class="slideT1M">
<div class="slideLeftHorizontal">
L
</div>
<div class="slideInner">
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/5775/calculator-scientific.jpg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
<a href="#">
<img src="https://images.pexels.com/photos/212286/pexels-photo-212286.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</a>
</div>
<div class="slideRightHorizontal">
R
</div>
</div>