How to make the slider automatic and infinite?

'use strict';
 var multiItemSlider = (function () {
 return function (selector, config) {
var
 _mainElement = document.querySelector(selector), // main block element
 _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // wrapper for .slider-item
 _sliderItems = _mainElement.querySelectorAll('.slider__item'), // elements (.slider-item)
 _sliderControls = _mainElement.querySelectorAll('.slider__control'), // controls
 _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // button "LEFT"
 _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // button "RIGHT"
 _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // width of wrapper
 _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // width of one element 
 _positionLeftItem = 0, // position the left of the active element
 _transform = 0, // value transformation .slider_wrapper
 _step = _itemWidth / _wrapperWidth * 100, // size of a step (transformation)
 _items = []; // array of elements
 // fill the array _items
 _sliderItems.forEach(function (item, index) {
 _items.push({ item: item, position: index, transform: 0 });
});

 var position = {
 getMin: 0,
 getMax: _items.length - 1,
}

 var _transformItem = function (direction) {
 if (direction === 'right') {
 if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
return;
}
 if (!_sliderControlLeft.classList.contains('slider__control_show')) {
_sliderControlLeft.classList.add('slider__control_show');
}
 if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
_sliderControlRight.classList.remove('slider__control_show');
}
_positionLeftItem++;
 _transform -= _step;
}
 if (direction === 'left') {
 if (_positionLeftItem <= position.getMin) {
return;
}
 if (!_sliderControlRight.classList.contains('slider__control_show')) {
_sliderControlRight.classList.add('slider__control_show');
}
 if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
_sliderControlLeft.classList.remove('slider__control_show');
}
_positionLeftItem--;
 _transform += _step;
}
 _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}

 // the click event handler for the buttons "back" and "forward"
 var _controlClick = function (e) {
 if (e.target.classList.contains('slider__control')) {
e.preventDefault();
 var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
_transformItem(direction);
}
};

 var _setUpListeners = function () {
 // add the buttons "back" and "forward" of abbottina _controlClick for Sabita click
 _sliderControls.forEach(function (item) {
 item.addEventListener('click', _controlClick);
});
}

 // initialization
_setUpListeners();

 return {
 right: function () { // the right method
_transformItem('right');
},
 left: function () { // method left
_transformItem('left');
}
}

}
}());

 var slider = multiItemSlider('.slider')


How to make the slider automatic and infinite?
April 19th 20 at 12:38
1 answer
April 19th 20 at 12:40
To move / copy items from the beginning to end and Vice versa, depending on traffic.

Find more questions by tags JavaScript