|
Сообщение от DenKuzmin17
|
|
Как заставить раздельно работать слайдеры с одинаковыми классами?
|
как вариант,в цикле назначить свои параметры каждому слайдеру.
<!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>
$(function() {
$('.slider').each(function() {
var IMG_WIDTH = 500;
var currentImg = 0;
var maxImages = 3;
var speed = 500;
var slider = $(this);
var swipeOptions = {
triggerOnTouchEnd: true,
swipeStatus: swipeStatus,
allowPageScroll: "vertical",
threshold: 75
};
slider.swipe(swipeOptions);
/**
* Catch each phase of the swipe.
* move : we drag the div
* cancel : we animate back to where we were
* end : we animate to the next image
*/
function 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") {
scrollImages((IMG_WIDTH * currentImg) + distance, duration);
} else if (direction == "right") {
scrollImages((IMG_WIDTH * currentImg) - distance, duration);
}
} else if (phase == "cancel") {
scrollImages(IMG_WIDTH * currentImg, speed);
} else if (phase == "end") {
if (direction == "right") {
previousImage();
} else if (direction == "left") {
nextImage();
}
}
}
function previousImage() {
currentImg = Math.max(currentImg - 1, 0);
scrollImages(IMG_WIDTH * currentImg, speed);
}
function nextImage() {
currentImg = Math.min(currentImg + 1, maxImages - 1);
scrollImages(IMG_WIDTH * currentImg, speed);
}
/**
* Manually update the position of the slider on drag
*/
function scrollImages(distance, duration) {
slider.css("transition-duration", (duration / 1000).toFixed(1) + "s");
//inverse the number we set in the css
var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
slider.css("transform", "translate(" + value + "px,0)");
}
})
});
</script>
</body>
</html>