Слайдер изображений не переключается, используя мышь или пробивки ⇐ Javascript

[Anonymous]

На этом слайдере, написанном в JavaScript, изображения не переключаются ни с мышью, ни с помощью Swipes. Что нужно изменить в коде, чтобы все найденные изображения прокручивались при щелчке стрелок и прокручивании?var modal = document.getElementById("myModal");
var img = document.getElementsByTagName('img');
var modalImg = document.getElementById('img01');

var currentImage;

for (var i = 0; i < img.length - 1; i++) {
img.setAttribute('data', i);
img.onclick = function() {
modal.style.opacity = "1";
modal.style.visibility = "visible";

modalImg.src = this.src;
currentImage = this;
}
}

document.getElementsByClassName("close")[0].onclick = function() {
modal.style.display = "none";
}

let slider = document.querySelector('.slider'),
sliderList = slider.querySelector('.slider-list'),
sliderTrack = slider.querySelector('.slider-track'),
slides = slider.querySelectorAll('.slide'),
arrows = slider.querySelector('.slider-arrows'),
prev = arrows.children[0],
next = arrows.children[1],
slideWidth = slides[0].offsetWidth,
slideIndex = 0,
posInit = 0,
posX1 = 0,
posX2 = 0,
posY1 = 0,
posY2 = 0,
posFinal = 0,
isSwipe = false,
isScroll = false,
allowSwipe = true,
transition = true,
nextTrf = 0,
prevTrf = 0,
lastTrf = --slides.length * slideWidth,
posThreshold = slides[0].offsetWidth * 0.35,
trfRegExp = /([-0-9.]+(?=px))/,
swipeStartTime,
swipeEndTime,
getEvent = function() {
return (event.type.search('touch') !== -1) ? event.touches[0] : event;
},
slide = function() {
if (transition) {
sliderTrack.style.transition = 'transform .5s';
}

sliderTrack.style.transform = `translate3d(-${slideIndex * slideWidth}px, 0px, 0px)`;

prev.classList.toggle('disabled', slideIndex === 0);
next.classList.toggle('disabled', slideIndex === --currentImage.length);
},
swipeStart = function() {
let evt = getEvent();

if (allowSwipe) {

swipeStartTime = Date.now();

transition = true;

nextTrf = (slideIndex + 1) * -slideWidth;
prevTrf = (slideIndex - 1) * -slideWidth;

posInit = posX1 = evt.clientX;
posY1 = evt.clientY;

sliderTrack.style.transition = '';

document.addEventListener('touchmove', swipeAction);
document.addEventListener('mousemove', swipeAction);
document.addEventListener('touchend', swipeEnd);
document.addEventListener('mouseup', swipeEnd);

sliderList.classList.remove('grab');
sliderList.classList.add('grabbing');
}
},
swipeAction = function() {

let evt = getEvent(),
style = sliderTrack.style.transform,
transform = +style.match(trfRegExp)[0];

posX2 = posX1 - evt.clientX;
posX1 = evt.clientX;

posY2 = posY1 - evt.clientY;
posY1 = evt.clientY;

if (!isSwipe && !isScroll) {
let posY = Math.abs(posY2);
if (posY > 7 || posX2 === 0) {
isScroll = true;
allowSwipe = false;
} else if (posY < 7) {
isSwipe = true;
}
}

if (isSwipe) {
if (slideIndex === 0) {
if (posInit < posX1) {
setTransform(transform, 0);
return;
} else {
allowSwipe = true;
}
}

// запрет ухода вправо на последнем слайде
if (slideIndex === --slides.length) {
if (posInit > posX1) {
setTransform(transform, lastTrf);
return;
} else {
allowSwipe = true;
}
}

if (posInit > posX1 && transform < nextTrf || posInit < posX1 && transform > prevTrf) {
reachEdge();
return;
}

sliderTrack.style.transform = `translate3d(${transform - posX2}px, 0px, 0px)`;
}

},
swipeEnd = function() {
posFinal = posInit - posX1;

isScroll = false;
isSwipe = false;

document.removeEventListener('touchmove', swipeAction);
document.removeEventListener('mousemove', swipeAction);
document.removeEventListener('touchend', swipeEnd);
document.removeEventListener('mouseup', swipeEnd);

sliderList.classList.add('grab');
sliderList.classList.remove('grabbing');

if (allowSwipe) {
swipeEndTime = Date.now();
if (Math.abs(posFinal) > posThreshold || swipeEndTime - swipeStartTime < 300) {
if (posInit < posX1) {
slideIndex--;
} else if (posInit > posX1) {
slideIndex++;
}
}

if (posInit !== posX1) {
allowSwipe = false;
slide();
} else {
allowSwipe = true;
}

} else {
allowSwipe = true;
}

},
setTransform = function(transform, comapreTransform) {
if (transform >= comapreTransform) {
if (transform > comapreTransform) {
sliderTrack.style.transform = `translate3d(${comapreTransform}px, 0px, 0px)`;
}
}
allowSwipe = false;
},
reachEdge = function() {
transition = false;
swipeEnd();
allowSwipe = true;
};

sliderTrack.style.transform = 'translate3d(0px, 0px, 0px)';
sliderList.classList.add('grab');

sliderTrack.addEventListener('transitionend', () => allowSwipe = true);
slider.addEventListener('touchstart', swipeStart);
slider.addEventListener('mousedown', swipeStart);

arrows.addEventListener('click', function() {
let target = event.target;

if (target.classList.contains('next')) {
slideIndex++;
} else if (target.classList.contains('prev')) {
slideIndex--;
} else {
return;
}

slide();
});< /code>
* {
box-sizing: border-box;
}
.slider {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto 0;
user-select: none;
touch-action: pan-y;
}

.slider img {
poiner-events: none;
}

.slider-list {
width: 200px;
height: 200px;
overflow: hidden;
}

.slider-list.grab {
cursor: grab;
}

.slider-list.grabbing{
cursor: grabbing;
}

.slider-track {
display: flex;
}

.slide {
width: 200px;
height: 200px;
flex-shrink: 0;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
}

.slider-arrows {
margin-top: 15px;
text-align: center;
}

.next,
.prev {
background: none;
border: none;
margin: 0 10px;
font-size: 30px;
cursor: pointer;
}

.next.disabled,
.prev.disabled {
opacity: .25;
pointer-events: none;
}

.myImg {
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {
opacity: 0.7;
}
.modals {
opacity: 0;
visibility: hidden;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
}
.slide {
margin: auto;
display: block;
pointer-events: none;
width: 80%;
max-width: 700px;
}
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duraion: 0.6s;
}
/* Next & previous buttons */

.prev,
.next {
cursor: pointer;
position: absolute;
top: 0;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */

.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}< /code>





X







←
→


< /code>
< /div>
< /div>
< /p>
Что я пытался сделать: < /strong>
В событии нажатия кнопки я добавил поиск изображения с помощью данных. Это сработало, но переключает изображения без анимации. И я вообще не мог сделать это для события обмена. < /P>
arrows.addEventListener('click', function() {
let target = event.target;
if (target.classList.contains('next')) {
var count = parseInt(currentImage.getAttribute("data"));
if (count > 0) currentImage = img[count - 1];
modalImg.src = currentImage.src;
}
}



Подробнее здесь: https://stackoverflow.com/questions/797 ... -or-swipes