Помогите придумать логику к движению в правую сторону.
Бесконечное движение слайдов с разной шириной я сделал, но возникли проблемы как сделать тоже самое на другую сторону с привязкой к шагу. Что-то делаю и сразу натыкаюсь на проблемы, которые не могу решить.
Помогите хотя бы чисто теоретически что надо сделать, если нет времени исправлять. Предупреждаю мой код является не оптимизированным. Мне нужно решить проблему, а тогда я сам этим займусь.:help: 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> Код:
*{ |
Часовой пояс GMT +3, время: 03:40. |