Бесконечное движение слайдов с разной шириной я сделал, но возникли проблемы как сделать тоже самое на другую сторону с привязкой к шагу. Что-то делаю и сразу натыкаюсь на проблемы, которые не могу решить.
Помогите хотя бы чисто теоретически что надо сделать, если нет времени исправлять.
Предупреждаю мой код является не оптимизированным.
Мне нужно решить проблему, а тогда я сам этим займусь.
let init = () => {
btnLeft = document.getElementById('btnLeft');
btnRight = document.getElementById('btnRight');
slides = document.querySelectorAll('.slide');
slider = document.querySelector('.slider');
sliderWidth = document.querySelector('.slider').clientWidth;
step = 0;
step_2 = 0;
step_move = 0;
offset = 0;
elemsDraw = []; //array of widths for draw
elemsDraw_2 = []; //array of widths for draw
newArrRep = [];
screenElems = [];
arrWidths = []; // array of width for move
arrWidths_2 = []; // array of width for move
let moveLeft = () => {
elems = document.querySelectorAll('.slide');
let fillGap = () => {
elems = document.querySelectorAll('.slide');
let sum = 0;
for (let i = 0; i < elems.length; i++) {
sum += elems[i].clientWidth;
}
sum -= elems[0].clientWidth;
if (sum < sliderWidth) {
drawRight();
fillGap();
elems = document.querySelectorAll('.slide');
} else {
elems = document.querySelectorAll('.slide');
return;
}
}
fillGap();
if (step_move > slides.length - 1) { step_move = 0 };
for (let i = 0; i < elems.length; i++) {
current_position = elems[i].offsetLeft;
elems[i].style.left = current_position - elems[step_move].clientWidth + 'px';
}
newArrRep.push(elems[step_move].clientWidth);
setTimeout(() => {
elems[0].remove();
step_move--;
}, 1000);
step_move++;
}
let drawRight = () => {
let gapRight = 0;
if (document.querySelectorAll('.slide')) {
[...elemsDraw].forEach((elem) => {
gapRight += elem;
});
}
if (step > slides.length - 1) { step = 0 };
let repairReal = 0;
for (let i = 0; i < newArrRep.length; i++) {
repairReal += newArrRep[i];
}
slides[step].style.left = (gapRight - repairReal) + "px";
slider.append(slides[step]);
arrWidths.push(slides[step].clientWidth);
let widthPush = slides[step].clientWidth;
elemsDraw.push(widthPush);
step++;
}
let checkingGap = () => {
let elems = document.querySelectorAll('.slide');
let allWidth = 0;
elems.forEach((element) => {
allWidth += element.clientWidth;
});
if (allWidth < sliderWidth) {
drawRight();
checkingGap();
} else {
return;
}
};
let actionLeft = () => {
drawRight();
checkingGap();
moveLeft();
}
let main = (() => {
slides.forEach((element) => {
element.remove();
});
checkingGap();
btnLeft.onclick = () => {
actionLeft();
}
btnRight.onclick = () => {
}
})();
}//end of init
window.addEventListener('load', init, false);
<body>
<div class="slider">
<div class="slide w168px"></div>
<div class="slide w250px"></div>
<div class="slide w80px"></div>
<div class="slide w280px"></div>
<div class="slide w150px"></div>
<div class="slide w52px"></div>
</div>
<div class="buttons">
<button id="btnLeft">Left</button>
<button id="btnRight">Right</button>
</div>
<script src="script.js"></script>
</body>
|
Код:
|
*{
margin:0px;
padding:0px;
}
.bs{
border:2px solid rgb(81, 243, 17);
}
.buttons{
width:200px;
margin:0px auto;
display: flex;
flex-flow: row wrap;
}
.buttons button{
width:50%;
padding:20px;
}
.slider{
width:300px;
height:300px;
border:4px solid grey;
margin:100px auto;
position: relative;
}
.slide{
transition:all 1s ease-in-out 0s;
}
.w168px{
width:168px;
height:300px;
background-color: rgb(231, 84, 84);
position: absolute;
top:0px;
left:0px;
}
.w250px{
width:250px;
height:300px;
background-color: rgb(38, 129, 214);
position: absolute;
top:0px;
left:0px;
}
.w80px{
width:80px;
height:300px;
background-color: seagreen;
position: absolute;
top:0px;
left:0px;
}
.w280px{
width:280px;
height:300px;
background-color: rgb(48, 93, 197);
position: absolute;
top:0px;
left:0px;
}
.w150px{
width:150px;
/* width:20px; */
height:300px;
background-color: rgb(235, 216, 40);
position: absolute;
top:0px;
left:0px;
}
.w52px{
width:52px;
height:300px;
background-color:rgb(255, 129, 150);
position: absolute;
top:0px;
left:0px;
} |
