<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
max-width: 1200px;
margin: 20px auto;
height: 2000px;
border: 1px solid black;
}
.bs {
border: 2px solid rgb(187, 28, 28);
}
header {
height: 100px;
background-color: rgb(140, 182, 91);
color: white;
}
.slider__wrapper {
display: flex;
transition: all .6s ease-in-out 0s;
}
.slider {
overflow: hidden;
}
.slider__item {
flex: 0 0 50%;
}
@media (max-width:900px) {
.slider__item {
flex: 0 0 100%;
}
}
.slider__content {
min-height: 250px;
}
.slider__slide-1 {
background-color: rgb(251, 84, 65);
}
.slider__slide-2 {
background-color: rgb(253, 173, 43);
}
.slider__slide-3 {
background-color: rgb(80, 248, 94);
}
.slider__slide-4 {
background-color: rgb(114, 223, 250);
}
.slider__slide-5 {
background-color: rgb(116, 114, 250);
}
.slider__slide-6 {
background-color: rgb(218, 114, 250);
}
.slider__slide-7 {
background-color: rgb(250, 114, 148);
}
.slider__slide-8 {
background-color: rgb(50, 48, 53);
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<header>129</header>
<main>
<div class="slider">
<div class="slider__wrapper" data-wrapper>
<div class="slider__item" data-slider-items>
<div class="slider__content slider__slide-1">1</div>
</div>
<div class="slider__item" data-slider-items>
<div class="slider__content slider__slide-2">2</div>
</div>
<div class="slider__item" data-slider-items>
<div class="slider__content slider__slide-3">3</div>
</div>
<div class="slider__item" data-slider-items>
<div class="slider__content slider__slide-4">4</div>
</div>
<div class="slider__item" data-slider-items>
<div class="slider__content slider__slide-5">5</div>
</div>
</div>
</div>
<button id="btnLeft" class="btn-style">Left</button>
<button id="btnRight" class="btn-style">Right</button>
</main>
</div>
<script>
let init = () => {
const _sliderWrapper = document.querySelector('[data-wrapper]');
let _sliderItems = document.querySelectorAll('[data-slider-items]');
const _sliderItem = document.querySelector('[data-slider-items]');
const _btnLeft = document.getElementById('btnLeft');
const _btnRight = document.getElementById('btnRight');
let _sliderItemWidth = parseFloat(getComputedStyle(_sliderItem).width);
let _sliderWrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width);
let _sizeMoving = (_sliderItemWidth * 100) / _sliderWrapperWidth;
let _transform = 0;
let _step = -1;
const _items = [];
let _truly = true;
let _isVisible = _sliderWrapperWidth / _sliderItemWidth;
_sliderItems.forEach((element, index) => {
_items.push({
item: element,
positions: {
posChangable: index,
static: index
},
transform: 0
});
});
const _distance = _items.length * 100;
let main = (() => {
window.addEventListener('resize', () => {
console.log("resize");
console.log(window.innerWidth);
console.log("action");
reset();
});
_btnLeft.onclick = () => { movement('left'); console.log(_items) };
_btnRight.onclick = () => { movement('right'); console.log(_items) };
document.addEventListener('transitionend', () => { _truly = true });
setInterval(() => { movement('left') }, 1500);
})();
let reset = () => {
let t = 0;
_step = -1;
_isVisible = howMuchAre();
_sliderItems.forEach((element, index) => {
element.remove();
_items[index].positions.posChangable = index;
_items[index].positions.static = index;
_items[index].transform = 0;
if (element.hasAttribute('style')) {
element.removeAttribute('style');
}
_transform = 0;
});
_sliderItems.forEach((element, index) => {
_sliderWrapper.append(element);
});
if (_sliderWrapper.hasAttribute('style')) {
_sliderWrapper.removeAttribute('style');
}
_sliderItems = document.querySelectorAll('[data-slider-items]');
_sliderItemWidth = parseFloat(getComputedStyle(_sliderItem).width);
_sliderWrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width);
_sizeMoving = (_sliderItemWidth * 100) / _sliderWrapperWidth;
console.log("_sizeMoving inner = " + _sizeMoving);
}
let howMuchAre = () => {
let res = _sliderWrapperWidth / _sliderItemWidth;
return res;
}
let movement = (direction) => {
if (direction === 'left') {
_step++;
console.log("_isVisible inner = " + _isVisible);
if (_step > findMaxMin('max') - _isVisible) {
let indexMin = findMaxMin('min');
let realMin = compare(indexMin);
_items[realMin].positions.posChangable += _items.length;
_items[realMin].transform += _distance;
_items[realMin].item.style.transform = 'translateX(' + _items[realMin].transform + '%)';
}
_transform -= _sizeMoving;
}
if (direction === 'right') {
_step--;
if (_step < findMaxMin('min')) {
let indexMax = findMaxMin('max');
let realMax = compare(indexMax);
_items[realMax].positions.posChangable -= _items.length;
_items[realMax].transform -= _distance;
_items[realMax].item.style.transform = 'translateX(' + _items[realMax].transform + '%)';
}
_transform += _sizeMoving;
}
_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}
let compare = (indexMin) => {
let realMin = 0;
_items.forEach((element, index) => {
if (element.positions.posChangable == indexMin) {
realMin = element.positions.static;
}
});
return realMin;
}
let findMaxMin = (what) => {
let arrTemp = [];
_items.forEach((element, index) => {
arrTemp.push(element.positions.posChangable);
});
if (what === 'max') { return Math.max(...arrTemp) };
if (what === 'min') { return Math.min(...arrTemp) };
}
}
window.addEventListener('load', init, false);
</script>
</body>
</html>