Carousel
Карусель
<div class="ml-carousel" data-carousel>
<div class="ml-carousel__frame js_frame">
<ul class="ml-carousel__slides js_slides">
<li class="js_slide">1</li>
<li class="js_slide">2</li>
<li class="js_slide">3</li>
<li class="js_slide">4</li>
<li class="js_slide">5</li>
<li class="js_slide">6</li>
</ul>
</div>
<div class="ml-pagination ml-carousel__dots js_dots"></div>
<span class="ml-button-arrow ml-button-arrow--left ml-carousel__left js-carousel__prev">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
</svg>
</span>
<span class="ml-button-arrow ml-button-arrow--right ml-carousel__right js-carousel__next">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M9.239 19L8 17.6904 15.759 11 24 17.5802l-1.1859 1.3536-7.0086-5.596z"></path>
</svg>
</span>
</div>
npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-carousel] (https://www.npmjs.com/package/@megalabs/ml-carousel)
Для установки пакета
- npm i @megalabs/ml-carousel
- затем в папке @megalabs/ml-carousel запускаем npm install
- npm start
Расширенные настройки
Слайдер инициализируется автоматически (DOMContentLoaded) по атрибуту data-carousel
В компоненте используется библиотека lory
var slider = document.querySelector('[data-carousel]');
if (slider) {
var dot_count = slider.querySelectorAll('.js_slide').length;
var dot_container = slider.querySelector('.js_dots');
var dot_list_item = document.createElement('span');
function handleDotEvent(e) {
if (e.type === 'before.lory.init') {
for (var i = 0, len = dot_count; i < len; i++) {
var clone = dot_list_item.cloneNode();
clone.classList.add("ml-pagination__item")
dot_container.appendChild(clone);
}
dot_container.childNodes[0].classList.add('is-active');
}
if (e.type === 'after.lory.init') {
for (var i = 0, len = dot_count; i < len; i++) {
dot_container.childNodes[i].addEventListener('click', function(e) {
dot_navigation_slider.slideTo(Array.prototype.indexOf.call(dot_container.childNodes, e.target));
});
}
}
if (e.type === 'after.lory.slide') {
for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
dot_container.childNodes[i].classList.remove('is-active');
}
dot_container.childNodes[e.detail.currentSlide - 1].classList.add('is-active');
}
if (e.type === 'on.lory.resize') {
for (var i = 0, len = dot_container.childNodes.length; i < len; i++) {
dot_container.childNodes[i].classList.remove('is-active');
}
dot_container.childNodes[0].classList.add('is-active');
}
}
slider.addEventListener('before.lory.init', handleDotEvent);
slider.addEventListener('after.lory.init', handleDotEvent);
slider.addEventListener('after.lory.slide', handleDotEvent);
slider.addEventListener('on.lory.resize', handleDotEvent);
var dot_navigation_slider =lory(slider, {
infinite: 1,
enableMouseEvents: true,
rewind: true,
classNamePrevCtrl: 'js-carousel__prev',
classNameNextCtrl: 'js-carousel__next'
});
}