Показать сообщение отдельно
  #1 (permalink)  
Старый 05.06.2015, 20:07
Новичок на форуме
Отправить личное сообщение для noto Посмотреть профиль Найти все сообщения от noto
 
Регистрация: 13.02.2015
Сообщений: 7

Карусель для картинок разной ширины
Всем привет!

Возникла следующая проблема. Какое нужно создать условия, для остановки прокрутки вправо, если обнаружен последний элемент карусели(т.е фото)? Думал по координатам определять, находится ли в зоне видимости фото и тогда прокручивать на ширину фотографии карусель, но тоже не могу додуматься как это сделать. Если что, У меня обычная карусель, которая работает по маргину влево, если нужно могу написать сюда структуру этой карусели.

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, 05.06.2015 в 20:21.
Ответить с цитированием