Необходимо реализовать появление кнопок пролистывания пунктов меню при открытии нескольких пунктов, если они занимают более одной строки. как на картинке:
Т.е.,
- Кнопки пролистывания (стрелки) изначально — с классом
hidden
. - Если элементы списка
li
занимают больше одной строки, то кнопки пролистывания (влево, вправо) появляются — добавляем классshow
. - При нажатии на стрелки (влево, вправо) элементы списка
li
пролистываются в рамках одной строки (т.е. они не переносятся на другую строку). - Элементы списка
li
скрываются слева или справа при нажатии на стрелки
Главный вопрос, как отследить что элементы списка заняли больше одной строки, чтобы появились кнопки влево/вправо?
уточняю вопрос: ширина элемента списка li всегда разная, элементы списка подгружаются динамически с ajax. т.е. надо как-то вычислять ширину элемента li. Вот такой код у меня
/*multiselection*/
(function() {
function Slideshow(element) {
this.el = document.querySelector(element);
this.init();
}
Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector(".slider-wrapper");
this.previous = this.el.querySelector(".slider-previous");
this.next = this.el.querySelector(".slider-next");
this.index = 0;
this.recalculate();
this.actions();
},
recalculate: function() {
this.slides = this.el.querySelectorAll('.slide');
this.total = this.slides.length;
},
_slideTo: function(slide) {
var currentSlide = this.slides[slide];
this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px";
},
actions: function() {
var self = this;
self.next.addEventListener("click", function() {
self.index++;
self.previous.style.display = "block";
if (self.index == self.total - 1) {
self.index = self.total - 1;
self.next.style.display = "none";
}
self._slideTo(self.index);
}, false);
self.previous.addEventListener("click", function() {
self.index--;
self.next.style.display = "block";
if (self.index == 0) {
self.index = 0;
self.previous.style.display = "none";
}
self._slideTo(self.index);
}, false);
$(document).on('order:service:tabs:add', function() {
console.log('tab added');
});
$(document).on('request:service:tab:close', function() {
console.log('tab closed');
})
}
};
document.addEventListener("DOMContentLoaded", function() {
var slider = new Slideshow("#multiSelection");
});
})();
.slider {
width: 730px;
overflow: hidden;
}
.slider-wrapper {
width: 9999px;
height: auto;
position: relative;
transition: left 500ms linear;
}
.slide {
float: left;
position: relative;
width: auto;
height: auto;
}
.slider-nav {
width: 100%;
display: none;
}
<div class="slider" id="multiSelection">
<ul class="slider-wrapper nav nav-tabs js_order_service_tabs">
<li class="slide"></li>
<li class="slide"></li>
</ul>
<div class="slider-nav">
<div id="moveMenuLeft" class="icon-wrap-style-left slider-previous">
<i class="icon icon-chevron-left icon-position-left "></i>
</div>
<div id="moveMenuRight" class="icon-wrap-style-right slider-next">
<i class="icon icon-chevron-right icon-position-right"></i>
</div>
</div>
</div>