JS Slider funktioniert nicht

Question

Ich habe eine JS-Klasse für Slider, aber etwas schief gelaufen, wenn js zu HTML verbinden, habe ich Klasse für Slider, Slider Container, Pfeile und Punkte. Bitte helfen Sie mir

<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

und Slider-Klasse über 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'); 
    } 
}