Сергей Ракипов,
положение картинки относительно родителя? |
рони,
Нет, я просто как думаю. Надо прочитать сколько пихалей следующая картинка и при клике сдвинуть ее на это количество. |
простейший слайдер кнопки управления
Сергей Ракипов,
:-? в примере ниже, картинки разной ширины. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .foto { position: relative; top: 0px; width: 640px; margin: 100px auto 0px; overflow-x: hidden; } .foto_blok{ display: flex; flex-direction: row; flex-wrap: nowrap; transition: 1s; } .foto_blok img{ flex: 0 1 0; } .strelka_1{ width: 40px; height: 320px; position: absolute; top: 0px; left: 0px; cursor: pointer; background-image: url(https://www.rakipov.ru/files/strelka.svg); background-repeat: no-repeat; background-position: top left; opacity: 0; z-index: 10; } .strelka_2{ width: 40px; height: 320px; position: absolute; top: 0px; right: 0px; cursor: pointer; background-image: url(https://www.rakipov.ru/files/strelka.svg); background-repeat: no-repeat; background-position: top right; opacity: 0; transform: rotate(180deg); z-index: 10; } .hide { visibility: collapse; } .foto:hover .strelka_1, .foto:hover .strelka_2{ opacity: .8; transition: 1.2s; } </style> </head> <body> <div class="foto"> <div class="strelka_1"></div> <div class="foto_blok"> <img src="https://www.rakipov.ru/files/1.jpg" height="320" width="370" alt=""> <img src="https://www.rakipov.ru/files/2.jpg" height="320" width="320" alt=""> <img src="https://www.rakipov.ru/files/3.jpg" height="320" width="320" alt=""> <img src="https://www.rakipov.ru/files/4.jpg" height="320" width="520" alt=""> <img src="https://www.rakipov.ru/files/5.jpg" height="320" width="320" alt=""> <img src="https://www.rakipov.ru/files/6.jpg" height="320" width="320" alt=""> <img src="https://www.rakipov.ru/files/7.jpg" height="320" width="320" alt=""> <img src="https://www.rakipov.ru/files/9.jpg" height="320" width="420" alt=""> </div> <div class="strelka_2"></div> </div> <script> const strelka_1 = document.querySelector(".strelka_1"); const strelka_2 = document.querySelector(".strelka_2"); const foto_blok = document.querySelector(".foto_blok"); const children = foto_blok.children; const len = children.length - 1; let index = 0; const upIndex = up => index = Math.max(0, Math.min(len, index + up)); const move = _ => { let x = children[index].offsetLeft, max = foto_blok.scrollWidth - foto_blok.clientWidth; strelka_1.classList.toggle("hide", x && x > max); strelka_2.classList.toggle("hide", !index); if(x > max) {index--; }; x = Math.min(x, max); foto_blok.style.transform = `translateX(${-x}px)`; } let slader_2 = () => { upIndex(-1) ; move(); } strelka_2.addEventListener("click", slader_2); let slader_1 = () => { upIndex(1); move(); } strelka_1.addEventListener("click", slader_1); window.addEventListener("load", move); </script> </body> </html> |
Цитата:
|
рони,
Надо все это переварить и осознать |
Часовой пояс GMT +3, время: 10:27. |