Question

我有一个 js类的滑块，但是在将js连接到html时出错了，我有滑块，滑块容器，箭头和点的类。 请帮帮我

<div class="b-slider">

<a href="#" class="arrow-right js-right"></a>
<a href="#" class="arrow-left js-left"></a>

<ul class="slider  js-slides">
    <li class="slide-one js-slide"></li>
    <li class="slide-two js-slide"></li>
    <li class="slide-three js-slide"></li>
</ul>

<ul class="dots">
    <li class="dot js-bull"><a class="show-slider"></a></li>
    <li class="dot js-bull active"><a class="show-slider"></a></li>
    <li class="dot js-bull"><a class="show-slider"></a></li>
</ul>

Answer 1

和滑块类通过JS

class Slider {
constructor (root, options = {}) {
    var defaultOptions = {};

    this.root = root;
    this.options = _.assign(defaultOptions, options);

    this.itemsCount = 0;
    this.itemWidth = 0;
    this.currentIndex = 0;

    this._cacheNodes();
    this._initialize();
    this._bindEvents();
}
_cacheNodes () {
    this.nodes = {
        slidesContainer: this.root.find('.js-slides'),
        slides: this.root.find('.js-slide'),
        left: this.root.find('.js-left'),
        right: this.root.find('.js-right'),
        bulls: this.root.find('.js-bull')
    };
}
_initialize () {
    this.itemsCount = this.nodes.slides.length;
    this.itemWidth = this.nodes.slides.eq(0).outerWidth(true);
    this.nodes.slidesContainer.width(this.itemWidth * (this.itemsCount));
    this._goTo(this.currentIndex);
}
_bindEvents () {
    $$.window.on('resize', () => {
        this._initialize();
    });

    this.nodes.left.on('click', () => {
        this._goTo(this.currentIndex - this.OnScreenCount);
    });

    this.nodes.right.on('click', () => {
        this._goTo(this.currentIndex + this.OnScreenCount);
    });

    if (this.nodes.bulls.length) {
        this.nodes.bulls.on('click', (event) => {
            this._goTo($(event.currentTarget).index());
        });
    }
}
_goTo (index) {
    if (index <= 0) {
        this.nodes.left.addClass('disabled');
    } else {
        this.nodes.left.removeClass('disabled');
    }

    if (index > this.itemsCount - 1 - this.screenCount) {
        this.nodes.right.addClass('disabled');
    } else {
        this.nodes.right.removeClass('disabled');
    }

    if ((index > this.itemsCount - this.screenCount) || (index < 0)) {
        return;
    }

    this.nodes.slidesContainer.css({
        transform: `translateX(${ -index * this.itemWidth }px)`
    });

    if (this.nodes.bulls.length) {
        this.nodes.bulls.eq(this.currentIndex).removeClass('active');
    }

    this.currentIndex = index;

    if (this.nodes.bulls.length) {
        this.nodes.bulls.eq(this.currentIndex).addClass('active');
    }
}

JS Slider不起作用

1 个答案: