Слайд изображения справа налево не работает при добавлении элементов управления в JS - PullRequest
Новая
       4

Слайд изображения справа налево не работает при добавлении элементов управления в JS

1 голос
/ 26 мая 2020

Используя материал, полученный на Inte rnet, я создал изображения слайдов, которые плавно перемещаются справа налево и наоборот слева направо. Когда я добавил javascript следующий / предыдущий элементы управления на основе w3 c, я не достиг элементов управления, работающих: СЛАЙДЫ не выбирали элементы из рисунка со слайдами классов.

Может ли кто-нибудь помочь мне увидеть, что неправильно? Я могу использовать только html, css, javascript.

Заранее спасибо.

PS: отступ странный, чтобы избежать сообщения «у вас больше кода, чем сообщения» - сжать решило проблему.

Мой код: 

var slideIndex = 1;
var myTimer;

// NEXT AND PREVIOUS CONTROL
function plusSlides(n) {
  clearInterval(myTimer);
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  if (n > slides.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = slides.length }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}
.slideContainer { max-width: 1100px; position: relative; margin: auto;}
.slideShow { overflow: hidden; height: 102px; }
.slideShow figure div { width: 20%; float: left;}
.slideShow figure img { width: 100%; float: left; }
.slideShow figure {position: relative; width: 500%; margin: 0; left: 0;
                   animation: 30s slidy infinite;}

@keyframes slidy {
     0%, 10% {left: 0%;}
    12%, 22% {left: -100%;}
    24%, 34% {left: -200%;}
    36%, 46% {left: -300%;}
    48%, 58% {left: -400%;}
    60%, 70% {left: -300%;}
    72%, 82% {left: -200%;}
    84%, 94% {left: -100%;}
    96%,100% {left: 0%;}
    }
 
.slideTxt { font-family: sans-serif; font-size: 2em;
    color: #FFF; padding: 10px 0 0 10px; position: absolute; }

.prev, .next { position: absolute; top: -20%; width: auto;
    margin-top: 4%; padding: 5px; color: #222428;
    font-weight: bold; font-size: 3em;		
    border-radius: 5px 5px 5px 5px;
	background-color: rgba(200,200,200, 0.4);
    }

.next {right: 0px;}
.prev {left: 0px;}

.prev:hover, .next:hover {
      color: #f2f2f2; background-color:rgba(0, 0, 0, 0.8); }
<div class="slideContainer">
  <div class="slideShow">
    <figure class="slides">
      <div class="slide">
         <span class="slideTxt">1/4</span>
         <img src="https://www.4shared.com/img/eWUgvuZXiq/s25/1724ebeed78/image01" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">2/4</span>
         <img src="https://www.4shared.com/img/Minb6_bRiq/s25/1724ebef160/image02" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">3/4</span>
         <img src="https://www.4shared.com/img/Ef4iP6Zwiq/s25/1724ebef548/image03" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">4/4</span>
         <img src="https://www.4shared.com/img/2InsamMSiq/s25/1724ebef930/image04" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">5/5</span>
         <img src="https://www.4shared.com/img/eWUgvuZXiq/s25/1724ebeed78/image01" style="width: 100%;">
      </div>
    </figure>
  </div>
  	
    <a class="prev" onclick='plusSlides(-1)'>&#10094;</a>
    <a class="next" onclick='plusSlides(1)'>&#10095;</a>
</div>
...