:write: всё в сборе ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Malleys JQuery Touch Slider</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 100vh;
background: #ececec;
}
.block {
width: 500px;
height: 100px;
margin: 10px auto;
}
.slider-box {
display: flex;
overflow: hidden;
border: 1px solid #909090;
}
.slider {
display: flex;
transition: 0.5s;
}
.slide {
display: flex;
width: 500px;
height: 100px;
align-items: center;
justify-content: center;
}
/* :focus:hover {
outline: none;
} */
</style>
</head>
<body translate="no">
<section>
<div class="block 1">
<div class="slider-box">
<div class="slider">
<div class="slide">1 / 3</div>
<div class="slide">2 / 3</div>
<div class="slide">3 / 3</div>
</div>
</div>
</div>
<hr>
<div class="block 2">
<div class="slider-box">
<div class="slider">
<div class="slide">1 / 4</div>
<div class="slide">2 / 4</div>
<div class="slide">3 / 4</div>
<div class="slide">4 / 4</div>
</div>
</div>
</div>
<hr>
<div class="block 3">
<div class="slider-box">
<div class="slider">
<div class="slide">1 / 2</div>
<div class="slide">2 / 2</div>
</div>
</div>
</div>
<hr>
</section>
<script src='https://profforma.store/assets/js/jquery.min.js'></script>
<script src='https://profforma.store/assets/js/jquery.touchSwipe.min.js'></script>
<script>
class Slider {
constructor(slider) {
this.IMG_WIDTH = 500;
this.currentImg = 0;
this.speed = 500;
this.swipeStatus = this.swipeStatus.bind(this);
this.keyboardHandler = this.keyboardHandler.bind(this);
this.slider = $(slider);
this.slider
.parent()
.attr("tabIndex", 0)
.on("blur focus click", this.keyboardHandler)
.swipe({
triggerOnTouchEnd: true,
triggerOnTouchLeave: true,
swipeStatus: this.swipeStatus,
allowPageScroll: "vertical",
threshold: 75
});
this.maxImages = this.slider.find(">*").length;
}
keyboardHandler(event) {
if (event.type === "focus") {
document.addEventListener("keydown", this.keyboardHandler);
this.constructor.activeInstance = this;
} else if (event.type === "blur") {
document.removeEventListener("keydown", this.keyboardHandler);
this.constructor.activeInstance = null;
} else if (event.type === "keydown") {
if (event.keyCode === 37) this.previousImage();
if (event.keyCode === 39) this.nextImage();
} else {
this.slider.parent().focus();
}
return true;
}
swipeStatus(event, phase, direction, distance) {
//If we are moving before swipe, and we are going L or R in X mode, or U or D in Y mode then drag.
if (phase == "move" && (direction == "left" || direction == "right")) {
var duration = 0;
if (direction == "left") {
this.scrollImages(
this.currentImg + distance / this.IMG_WIDTH ,
duration
);
} else if (direction == "right") {
this.scrollImages(
this.currentImg - distance / this.IMG_WIDTH ,
duration
);
}
} else if (phase == "cancel") {
this.scrollImages(this.currentImg, this.speed);
} else if (phase == "end") {
if (direction == "right") {
this.previousImage();
} else if (direction == "left") {
this.nextImage();
}
}
}
scrollImages(distance, duration) {
this.slider.css({"transition-duration" : (duration / 1000).toFixed(1) + "s",
"transform" : "translate(" + (100 * -distance / this.maxImages) + "%,0)"});
}
previousImage() {
this.currentImg = Math.max(this.currentImg - 1, 0);
this.scrollImages(this.currentImg, this.speed);
}
nextImage() {
this.currentImg = Math.min(this.currentImg + 1, this.maxImages - 1);
this.scrollImages(this.currentImg, this.speed);
}
}
$(() => {
for (const element of $(".slider")) {
new Slider(element);
}
});
</script>
</body>
</html>
|