Галерея кнопки туда сюда
Всем ку. Проблема при создании кнопок -> и <-
Да, можно взять и добавить jQuery+Lightbox за 2 секунды, но у меня проект и надо всё сделать на VanillaJS. HTML <div class="gallery"> <img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" /> <img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" /> <img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" /> <img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" /> </div> <div class="galleryView"> <div class="bg"></div> <div class="photos"> <img src="img/galleryView/img1.jpg" alt=""> <img src="img/galleryView/img2.jpg" alt=""> <img src="img/galleryView/img3.jpg" alt=""> <img src="img/galleryView/img4.jpg" alt=""> <div class="controls"> <div class="prev"><img src="img/arrow.svg" alt=""></div> <div class="next"><img src="img/arrow.svg" alt=""></div> </div> </div> </div> Сама кнопка туда работает, а вот назад я хз как сделать. var imgs = ["img/galleryView/img1.jpg", "img/galleryView/img2.jpg", "img/galleryView/img3.jpg", "img/galleryView/img4.jpg" ]; var imgCurrent = 0; prev.addEventListener('click', () => { imgCurrent = (imgCurrent - 1) % imgs.length; console.log(imgCurrent + " - " + imgs[imgCurrent]); }); next.addEventListener('click', () => { imgCurrent = (imgCurrent + 1) % imgs.length; console.log(imgCurrent + " - " + imgs[imgCurrent]); }); При клике направо вот такой оутпут 1 - img/galleryView/img2.jpg 2 - img/galleryView/img3.jpg 3 - img/galleryView/img4.jpg 0 - img/galleryView/img1.jpg 1 - img/galleryView/img2.jpg 2 - img/galleryView/img3.jpg 3 - img/galleryView/img4.jpg 0 - img/galleryView/img1.jpg 1 - img/galleryView/img2.jpg А налево вот такой: и он неправильный) как его сделать правильным?) 0 - img/galleryView/img1.jpg -1 - undefined -2 - undefined -3 - undefined 0 - img/galleryView/img1.jpg -1 - undefined -2 - undefined -3 - undefined Может есть более простые примеры? Вообще то изначально я сделал вот так(кнопка направо, аналог налево такой же только разные цифры) и работало вообще без проблем, но если я покажу этот код то мне скажут что всё плохо, надо проще и по возможности без кучи if else как у меня if(photos.children[0].style.display === "initial"){ photos.children[0].style.display = 'none'; photos.children[1].style.display = 'initial'; }else if(photos.children[1].style.display === "initial"){ photos.children[1].style.display = 'none'; photos.children[2].style.display = 'initial'; }else if(photos.children[2].style.display === "initial"){ photos.children[2].style.display = 'none'; photos.children[3].style.display = 'initial'; }else if(photos.children[3].style.display === "initial"){ photos.children[3].style.display = 'none'; photos.children[0].style.display = 'initial'; } |
jack3dm,
а подумать? imgCurrent--; if(imgCurrent < 0) imgCurrent = imgs.length - 1; |
Цитата:
|
Часовой пояс GMT +3, время: 14:53. |