Создавая простой слайдер javascript с элементами управления, я испытываю трудности с триггерами управления (стрелки влево, вправо) и сталкиваюсь с плавным перемещением цикла слева направо при переходе к концу -к началу или наоборот.
function Slider(tag,count){
var self = this;
this.build=(buildset)=>build(buildset,self),
this.activeSlide = 0;
this.totalSlides = count,
this.slideWidth = (window.screen.width * -self.totalSlides),
this.getSlider=()=>get(tag),
this.controls={
left:()=>{
},
right:()=>{
var slider = self.getSlider();
append(slider,slider.children[0]);
self.clear();
setTimeout(()=>self.start(), 5000);
self.activeSlide++;
self.activeSlide = (self.activeSlide === self.totalSlides) ? 0 : self.activeSlide;
var slideTo = window.screen.width * -self.activeSlide;
slider.style.transform = "translateX("+slideTo+"px)";
}
},
this.start=()=>{
this.interval = setInterval(()=>{
var slider = self.getSlider();
append(slider,slider.children[0]);
self.activeSlide++;
self.activeSlide = (self.activeSlide === self.totalSlides) ? 0 : self.activeSlide;
var slideTo = window.screen.width * -self.activeSlide;
slider.style.transform = "translateX("+slideTo+"px)";
},5000);
},
this.clear=()=>{
clearInterval(this.interval);
}
}
//HTML
<wrapper data-wrapper="slider">
<control class="fa fa-arrow-circle-o-left fa-2x"></control>
<slider id="slide1">
<img src="/media/slide-1.jpg">
<img src="/media/slide-2.jpg">
<img src="/media/slide-3.jpg">
</slider>
<control class="fa fa-arrow-circle-o-right fa-2x"></control>
</wrapper>
Вопрос: Как я могу сделать переход ползунка от конца к началу, от начала к концу "бесконечным" циклом с плавным движением слева направо (легкость)?
