Реализация слайдера на чистом JavaScript

183

23 октября 2018, 18:40

Недавно освоил теоретические основы JS и решил закрепить знания сделав слайдер.

var slide_left = document.getElementById('left'), 
  slide_right = document.getElementById('right'), 
  images = document.getElementsByTagName('img'), 
  idx = 1; 
 
slide_right.addEventListener('click', moveLeft); 
 
function moveLeft() { 
  slide_left.style.display = 'block'; 
  images[idx].style.display = 'none'; 
  images[++idx].style.display = 'block'; 
  if (idx === images.length - 1) { 
    slide_right.style.display = 'none'; 
  } 
} 
 
slide_left.addEventListener('click', moveRight); 
 
function moveRight() { 
  slide_right.style.display = 'block'; 
  images[idx].style.display = 'none'; 
  images[--idx].style.display = 'none'; 
  if (idx === 0) { 
    slide_left.style.display = 'none'; 
  } 
}

.slides { 
  position: relative; 
  height: 300px; 
  padding: 0; 
  margin: 0; 
  list-style-type: none; 
} 
 
.slide { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 10; 
  z-index: 1; 
  font-size: 40px; 
  padding: 40px; 
  box-sizing: border-box; 
  background: #333; 
  color: #fff; 
} 
 
.showing { 
  opacity: 1; 
  z-index: 2; 
} 
 
img { 
  width: 100%; 
  height: 100%; 
} 
 
.cont_button { 
  display: flex; 
  justify-content: center; 
} 
 
#left, 
#right { 
  font-size: 50px; 
  border: none; 
  margin-top: 20px; 
  margin-left: 12px; 
  margin-right: 12px; 
  border-radius: 14px; 
  background-color: #d6b511; 
  color: black; 
  transition: .1s all; 
} 
 
#left:hover, 
#right:hover { 
  background-color: #ccff00; 
} 
 
#first_wallpaper, 
#second_wallpaper, 
#three_wallpaper {}

<ul class="slides"> 
  <li class="slide"> 
    <img id="first_wallpaper" src="http://via.placeholder.com/250x250/000000/red" alt=""> 
  </li> 
  <li class="slide"> 
    <img id="second_wallpaper" src="http://via.placeholder.com/250x250/000000/green" alt=""> 
  </li> 
  <li class="slide"> 
    <img id="three_wallpaper" src="http://via.placeholder.com/250x250/000000/blue" alt=""> 
  </li> 
</ul> 
<div class="cont_button"> 
  <button id="left">left</button> 
  <button id="right">right</button> 
</div>

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

Answer 1

"Код очень простой..." Это да... Но, тут попроще будет разобраться, думаю.

var slide_left = document.getElementById('left'), 
  slide_right = document.getElementById('right'), 
  images = document.getElementsByTagName('li'), 
  idx = 2; 
 
function fShowHide() { 
  images[idx].className = 'show'; 
  for (let i = 0; i < images.length; i++) { 
    if (i != idx) { 
      images[i].className = 'hide'; 
    }; 
  } 
} 
 
slide_left.addEventListener('click', function() { 
  this.disabled = (idx == 1); 
  idx--; 
  fShowHide(); 
  slide_right.disabled = false; 
}); 
 
slide_right.addEventListener('click', function() { 
  this.disabled = (idx == images.length - 2); 
  idx++; 
  fShowHide(); 
  slide_left.disabled = false; 
}); 
 
fShowHide();

.slides { 
  position: relative; 
  height: 300px; 
  width: 100%; 
  padding: 0; 
  margin: 0; 
  list-style-type: none; 
  background: #333; 
} 
 
.slides li { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  padding: 40px; 
  box-sizing: border-box; 
} 
 
img { 
  width: 100%; 
  height: 100%; 
} 
 
.hide { 
  opacity: 0; 
  height: 0; 
  transition: 1.5s all; 
} 
 
.show { 
  opacity: 1; 
  height: 100%; 
  transition: .8s all; 
} 
 
.cont_button { 
  display: flex; 
  justify-content: center; 
} 
 
#left, 
#right { 
  color: #050; 
  margin: 15px; 
  transition: .2s all; 
  background: transparent; 
  border: none; 
  outline: none; 
  font-size: 36px; 
} 
 
#left:hover, 
#right:hover { 
  color: #a00; 
} 
 
#left:disabled, 
#right:disabled { 
  color: #eee; 
}

<ul class="slides"> 
  <li> 
    <img src="http://via.placeholder.com/350x150/ffaaaa/ffffff?text=1%20первая" alt=""> 
  </li> 
  <li> 
    <img src="http://via.placeholder.com/350x150/ffcc66/ffffff?text=2" alt=""> 
  </li> 
  <li> 
    <img src="http://via.placeholder.com/350x150/bbbbbb/444444?text=3%20середина" alt=""> 
  </li> 
  <li> 
    <img src="http://via.placeholder.com/350x150/66bb66/ffffff?text=4" alt=""> 
  </li> 
  <li> 
    <img src="http://via.placeholder.com/350x150/6666bb/ffffff?text=5%20последняя" alt=""> 
  </li> 
</ul> 
 
<div class="cont_button"> 
  <button id="left">&#9668;</button> 
  <button id="right">&#9658;</button> 
</div>

Теория - это хорошо, но практика - наше всё))

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как перезагрузить slick slider после изменений в блоке

Есть набор блоков к которым подключен популярный слайдер slick slider, но на сайте в зависмости от ситуации нужно удалять некоторые или прибавлять,...

276

javascript