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'
        });
    }

Документация

https://github.com/meandmax/lory