Карусель для картинок разной ширины
Всем привет!
Возникла следующая проблема. Какое нужно создать условия, для остановки прокрутки вправо, если обнаружен последний элемент карусели(т.е фото)? Думал по координатам определять, находится ли в зоне видимости фото и тогда прокручивать на ширину фотографии карусель, но тоже не могу додуматься как это сделать. Если что, У меня обычная карусель, которая работает по маргину влево, если нужно могу написать сюда структуру этой карусели. P.S если у кого-то есть варианты как лучше это сделать, напишите пожалуйста:) P.P.S за помощь готов оплатить(за этим в лс); Сейчас черновой вариант следующий:
function Carousel(options) {
var elem = this.elem = options.elem;
this.position = 0; // текущая прокрутка карусели
elem.addEventListener("click", function(event){
this.checkDirection(event);
}.bind(this));
}
Carousel.prototype.checkDirection = function(event) {
var direction = event.target.getAttribute("data-direction");
switch (direction) {
case 'prev' :
this.prev(this.elem.offsetWidth);
break;
case 'next' :
this.next(this.elem.offsetWidth);
break;
}
};
Carousel.prototype.next = function(width) {
this.position += -width;
this.elem.querySelector(".gallery-main__photos").style.marginLeft = this.position + "px"
};
Carousel.prototype.prev = function(width) {
this.position += +width;
if (this.position >= 0) {
this.elem.querySelector(".gallery-main__photos").style.marginLeft = 0 + "px";
this.position = 0;
}
this.elem.querySelector(".gallery-main__photos").style.marginLeft = this.position + "px";
};
var carousel = new Carousel({elem: document.getElementById("gallery")});
|
noto,
сделайте макет с html и css |
noto,
алгоритм простой ширина всей галереи минус ширина окна показа -- если this.position больше этой величины сдвигают на вычисленную выше разницу а не на this.position |
рони,
http://codepen.io/anon/pen/PqmPpL Цитата:
|
Цитата:
решение по алгоритму выше и ширине 9999 http://codepen.io/anon/pen/eNWpjR |
Извиняюсь, не тот вариант скопировал просто. Поправил, gallery-main__photos ширина 9999px. Проблема в том, что картинок сейчас не на всю ширину контейнера, они могут добавляться или убираться в любой момент, по этому такой вариант не подходит. Можно конечно каждый раз менять ширину под текущий контейнер, но по моему это не очень хороший вариант.
|
noto,
какая разница сколько картинок ? алгоритм всегда отработает правильно -- вычисляется же ширина галереи на текущий момент, на момент клика. |
noto,
иного варианта просто нет. |
Можно еще наверное что то со счетчиком намутить,пример с массивом:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var arr = [1, 2, 3, 4, 5],
body = document.body,
count = 0,
len = arr.length;
alert(arr);
body.innerHTML = arr[0];
var interval = setInterval(function () {
count++;
if (count === len) {
clearInterval(interval);
} else {
arr.push(arr.shift());
body.innerHTML = arr[0];
}
}, 1000);
}
</script>
</head>
<body>
</body>
</html>
|
https://learn.javascript.ru/task/carousel вот кстати задачка похожая на вашу,там и решение к ней есть :)
|
| Часовой пояс GMT +3, время: 23:24. |