Сергей Ракипов,
как-то так ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slider {
position: relative;
overflow: hidden;
width: 910px;
margin: 0 auto;
}
.slider__wrapper {
display: flex;
transition: transform 0.6s ease;
}
.slider__item {
flex: 0 0 50;
max-width: 100%;
/* margin: 0px 10px 0px 10px; */
}
.slider__control {
position: absolute;
top: 0px;
display: none;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
transform: translateY(-50%);
background: rgba(0, 0, 0, .5);
}
.slider__control_show {
display: flex;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
}
.slider__control_left {
left: 0;
}
.slider__control_right {
right: 0;
}
.slider__control::before {
content: '';
display: inline-block;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_left::before {
width: 40px;
height: 598px;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
background-repeat: no-repeat;
background-position: top left;
opacity: .8;
z-index: 10;
}
.slider__control_right::before {
width: 40px;
height: 598px;
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
background-repeat: no-repeat;
background-position: top right;
opacity: .8;
transform: rotate(180deg);
z-index: 10;
}
.slider__item>div {
line-height: 598px;
}
@media (max-width:1360px) {
.slider {
position: relative;
overflow: hidden;
width: 580px;
margin: 0 auto;
}
}
@media (max-width:1020px) {
.slider {
position: relative;
overflow: hidden;
width: 290px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="slider">
<div class="slider__wrapper">
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-1.jpg" height="598" width="290" alt="">
</div>
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-2.jpg" height="598" width="290" alt="">
</div>
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-3.jpg" height="598" width="290" alt="">
</div>
</div>
<a class="slider__control slider__control_left" href="#" role="button"></a>
<a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
</div>
<script>
'use strict';
var multiItemSlider = (function() {
return function(selector, config) {
var
_mainElement = document.querySelector(selector), // основный элемент блока
_sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
_sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
_items = []; // массив элементов
window.addEventListener('resize', function() {
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width); // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width); // ширина одного элемента
_positionLeftItem = 1; // позиция левого активного элемента
_step = _itemWidth / _wrapperWidth * 100; // величина шага (для трансформации)
_transform = -_step; // значение транфсоформации .slider_wrapper
_transformItem('left');
});
// наполнение массива _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 + '%)';
}
// обработчик события click для кнопок "назад" и "вперед"
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() {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_sliderControls.forEach(function(item) {
item.addEventListener('click', _controlClick);
});
}
// инициализация
_setUpListeners();
return {
right: function() { // метод right
_transformItem('right');
},
left: function() { // метод left
_transformItem('left');
}
}
}
}());
var slider = multiItemSlider('.slider')
</script>
</body>
</html>