Как описать функцию смены картинки слайдера в данном случае?

Question

[Muranx]

Нужна помощь в том, как описать функцию стрелочек "вправо" и "влево" на слайдере! Есть картинки, при клике на которые запускается непосредственно слайдер, на слайдере есть две стрелочки (стили добавлять не стал, просто два чёрных квадратика)! Вот непосредственно с ними и загвоздка:
HTML :

<div class="mini-img-wrap">
  
  <div class="mini-img">
       <img src="https://www.stihi.ru/pics/2013/03/21/3655.jpg"           id="img" class="img" alt="">
  </div>
  
  <div class="mini-img">
       <img src="https://www.stihi.ru/pics/2005/12/19-543.jpg"           id="img" class="img" alt="">
  </div>
  
  <div class="mini-img">
       <img src="https://static.baza.farpost.ru/v/1536487862393_bulletin"           id="img" class="img" alt="">
  </div>
  
</div>

<div class="big-img-wrap" id="mstrbig">
  <div class="close" id="close">close</div>
  
  <div class="big-img">
    
    <div class="arrowRight" id="arrowRight"></div> 
    <div class="arrowLeft" id="arrowLeft"></div>
    
    <img class="big-img" id="bigImg" src="#" alt="">
  </div>
</div>

CSS :

.mini-img-wrap{
  width: 300px;
  height: 200px;
  margin: 100px auto;
}

.mini-img{
  width: 30%;
  height: 100%;
  float: left;
  margin-right: 10px;
}

.img{
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

.big-img-wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gray;
  display: none;
}

.close{
  position: absolute;
  right: 0px;
  width: 50px;
  height: 50px;
  background: red;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.big-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 400px;
  background: black;
}

.arrowRight{
  position: absolute;
  width: 30px;
  height: 30px;
  background: black;
  top: 50%;
  right: 10px;
  z-index: 99;
  transform: translate(0,-50%);
  display: block;
}

.arrowLeft{
  position: absolute;
  width: 30px;
  height: 30px;
  background: black;
  top: 50%;
  left: 10px;
  z-index: 99;
  transform: translate(0,-50%);
  display: block;
}

JavaScript :

miniImg        = document.getElementsByClassName("img"); 
close          = document.getElementById("close"); 
bigSlideWrap   = document.getElementById("mstrbig");
bigImg         = document.getElementById("bigImg");
aL             = document.getElementById("arrowLeft");
aR             = document.getElementById("arrowRight");

for(var i=0; i<miniImg.length; i++){
    miniImg[i].onclick=function(e){
    bigSlideWrap.style.display="block"
    bigImg.src=e.target.src
  }
};

aL.onclick=function(){
  alert("Arrow left") //в этих фукнциях и есть вопрос
}

aR.onclick=function(){
  alert("Arrow right") //в этих фукнциях и есть вопрос
}

close.onclick=function(){
  bigSlideWrap.style.display="none"
};

Answer 1

[hzzzzl]

сохраняешь в массиве src всех картинок

images = ['a','b','c','d']
// "https://www.stihi.ru/pics/2005/12/19-543.jpg"  , и так далее

и сохраняешь индекс текущего слайда

current = 0
// начинаем с первого, то есть "нулевого" элемента в массиве

и тогда

aL.onclick=function(){
  alert("Arrow left") //в этих фукнциях и есть вопрос
  current = current - 1 < 0 ? images.length - 1 : current - 1
  // меняем индекс текущего и перерисовываем в слайдере картинку на images[current]
}

aR.onclick=function(){
  alert("Arrow right") //в этих фукнциях и есть вопрос
  current = current + 1 > images.length - 1 ? 0 : current +1
  // меняем индекс текущего и перерисовываем в слайдере картинку на images[current]
}

Comments

[Muranx]

Хм, ну вот я создал к примеру arr = ["img/1.jpg", "img/2.jpg", "img/3.jpg"] и как мне связать переменную current с индексами этого массива, я чот не врубаюсь, в этом то у меня и загвоздка

[hzzzzl]

Muranx, никак, просто ставишь по умолчанию current = 0 и дальше само заработает, при нажании на стрелочки только подменять типа

document.querySelector('#bigImg').src = arr[current]

смысл в том, чтобы хранить отдельно номер слайда, который сейчас отображен на странице, и переключать только этот номер яваскриптом, вне зависимости от того, какие адреса хранятся в массиве всех фоток

UPD
https://codepen.io/anon/pen/MdjjRK

[Muranx]

hzzzzl, друг, будь добр перепиши это на ЕS5 --

const images = [...document.querySelectorAll('.mini-img img')].map(image => image.src)

я просто вообще не понимаю, что ты там написал (ну кроме метода map ;D)! Это же ES6, я ещё не изучал ни стрелки, не . . .document. Если можно с пояснениями, однозначно, вижу что работает, но вот не понимаю этой фразы, однозначно лайк, отмечу как решение !

[hzzzzl]

тогда по старинке проходимся в цикле, и собираем массив :)

var images = []
// все мои картинки
var imagesOnPage = document.querySelectorAll('.mini-img img')

for (var i = 0; i < imagesOnPage.length; i++) {
  // каждый src добавляем в массив images[]
  images.push(imagesOnPage[i].src)
}

тут в общем-то тоже самое происходит
.map(image => image.src)
работает так - делает что-то с каждым элементом массива, и возвращает результат,
здесь я не делаю ничего, а просто сразу возвращаю атрибут src, который и сохраняется в результирующем массиве images

// выдергиваем все слайды и помещаем в images[]
const images = 
       [...document.querySelectorAll('.mini-img img')]  // делаем массив из document.querySelectorAll('.mini-img img')
        .map(image => image.src)  // в массиве каждый элемент меняем на его src (сорс картинки)

ну в общем как-то так :)
https://codepen.io/anon/pen/xNERgp

[Muranx]

hzzzzl, Не злись брат, человек с такой авой как у тебя не должен быть злым! ;D Спасибо за помощь, однозначно лайк и ответ!

[Muranx]

hzzzzl, о, брат, рано похвалил, касяк!!! Когда я кликаю на среднюю картинку, и нажимаю влево к примеру, загружается не "левая" картинка, а правая. . . я кажись терь понял логику того, что ты мне писал, но хотел какбэ не этого! В идеале конечно последовательность картинок должна сохраняться, а не меняться, ты сам проверь! Я тебя про чо и спрашивал, как сделать так, чтобы минислайдер (маленькие картинки) стали аналогом того, что будет переключаться в большой картинке!

[hzzzzl]

Muranx, короче знаешь почему :D
вкратце потому что в циклах лучше использовать let а не var

стоило поменять на for(let i=0; i<imagesOnPage.length; i++) так всё заработало
(там есть обоснование типа если var, то переменная остается доступной и после цикла, и i в конце концов становится равно 3, потому что i++ отрабатывает в последний раз и блаблабла, но я если честно не застал ES5, а сразу яваскрипт начал изучать когда уже были let/const, поэтому с этим путаюсь.. короче лучше не использовать var, и тогда всё будет вести себя на порядок логичнее

https://codepen.io/anon/pen/yWaQwx

о, кстати
Стоит ли переходить с var на let и const?

[Muranx]

hzzzzl, хах, приколно, красава! ;D лайк!