31.05.2019, 12:22
|
|
Интересующийся
|
|
Регистрация: 31.05.2019
Сообщений: 22
|
|
|
Как заставить раздельно работать слайдеры с одинаковыми классами?
Есть несколько слайдеров с одинаковыми классами. При взаимодействии с одним, перелисывают все остальные. Как их разделить, сохранив одинаковые классы? Унифицировать каждый слайдер классом или айди - не вариант.
Ссылка на codepen |
|
31.05.2019, 12:59
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
https://codepen.io/Malleys/pen/byQjOM?editors=1010 Вам осталось добавить обработку событии клавиатуры!
UPD Добавил обработку событии клавиатуры!
Последний раз редактировалось Malleys, 31.05.2019 в 13:31.
|
|
31.05.2019, 13:48
|
|
Интересующийся
|
|
Регистрация: 31.05.2019
Сообщений: 22
|
|
|
Malleys ТОП! Спасибо большое!
|
|
31.05.2019, 14:29
|
|
Интересующийся
|
|
Регистрация: 31.05.2019
Сообщений: 22
|
|
|
Подскажите, пожалуйста, как исправить залипание клика? Например, если кликом потяну .slider и курсор уйдёт за пределы .slider-box, то слайдер залипает и начинает двигаться за курсором до следующего клика.
Как сделать, чтобы при выходе курсора за пределы слайда происходил "cancel"?
|
|
31.05.2019, 16:08
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от DenKuzmin17
|
Подскажите, пожалуйста, как исправить залипание клика? Например, если кликом потяну .slider и курсор уйдёт за пределы .slider-box, то слайдер залипает и начинает двигаться за курсором до следующего клика.
Как сделать, чтобы при выходе курсора за пределы слайда происходил "cancel"?
|
Может лучше cancel при отпускании клавиши мыши? https://codepen.io/Malleys/pen/byQjOM?editors=1010 |
|
31.05.2019, 16:24
|
|
Интересующийся
|
|
Регистрация: 31.05.2019
Сообщений: 22
|
|
В целом, понятно.
Если как в Вашем примере, то при зажатии слайда и переводе курсора мыши за область окна (например в поле html) и возврате курсора на слайд, слайдер залипает. Так же заметил, что если навести курсор на другие слайдеры, они тоже залипают.
Спасибо большое за помощь!  |
|
31.05.2019, 17:08
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
DenKuzmin17, проверьте ещё раз, я должно быть не сохранил пример, хотя там стоит автосохранение... (или вы посмотрели в тот момент, когда я что-то менял)
|
|
31.05.2019, 18:14
|
|
Интересующийся
|
|
Регистрация: 31.05.2019
Сообщений: 22
|
|
Сообщение от Malleys
|
|
DenKuzmin17, проверьте ещё раз, я должно быть не сохранил пример, хотя там стоит автосохранение... (или вы посмотрели в тот момент, когда я что-то менял)
|
Действительно. Сейчас всё отлично работает. Спасибо большое! |
|
31.05.2019, 18:20
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от 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>
|
|
|
|
