Не получается код HTML + CSS + JS

287
18 августа 2018, 02:40

Помогите, пожалуйста, пытался сделать слайдер на HTML + CSS + JS, в итоге не работает.

var slideIndex = 1; 
showSlides(slideIndex); 
function plusSlides(n) { 
	showSlides(slideIndex += n); 
} 
function currentSlide(n) { 
	showSlides(slideIndex = n); 
} 
function showSlides(n) { 
	var i; 
	var slides = document.getElementsByClassName("mySlides"); 
	var dots = document.getElementsByClassName("dot"); 
	if(n > slides.length){ 
		slideIndex = 1 
	} 
	if(n < 1){ 
		slideIndex=slides.length 
	} 
	for(i=0; i < slides.length; i++){ 
		slides[i].style.display = "none"; 
	} 
	for(i=0; i < dots.length; i++){ 
		dots[i].className = dots[i].className.replace("active",""); 
	} 
	slides[slideIndex-1].style.display = "block"; 
	dots[slideIndex-1].className+= "active"; 
}
.slideshow-container{ 
	max-width: 1000px; 
	position: relative; 
	margin: auto; 
} 
.prev, .next{ 
	cursor: pointer; 
	position: absolute; 
	top: 50%; 
	width: auto; 
	margin-top: -22px; 
	padding: 16px; 
	color: white; 
	font-weight: bold; 
	font-size: 18px; 
	transition: 0.6s ease; 
	border-radius: 0 3px 3px 0; 
} 
.next{ 
	right: 0; 
	border-radius: 3px 0 0 3px; 
} 
.prev:hover, next:hover{ 
	background-color: rgba(0,0,0,0.8); 
} 
.dot{ 
	cursor: pointer; 
	height: 13px; 
	width: 13px; 
	margin: 0 2px; 
	background-color: #bbb; 
	border-radius: 50%; 
	display: inline-block; 
	transition: background-color 0.6s ease 
} 
.active, .dot:hover{ 
	background-color: #717171; 
} 
.fade{ 
	-webkit-animation-name:fade; 
	-webkit-animation-duration:1.5s; 
	animation-name:fade; 
	animation-duration:1.5s; 
} 
@-webkit-keyframes fage{ 
	from{opacity: 4} 
	to{opacity: 1} 
} 
@keyframes fage{ 
	from{opacity: 4} 
	to{opacity: 1} 
}
<div class="slideshow-container"> 
        <div class="mySlides fade"> 
          <div class="numbertext">1/5</div> 
          <a href="#one!" class="carousel-item"><img src="img/one.png" style="width: 100%"></a> 
        </div> 
        <div class="mySlides fade"> 
          <div class="numbertext">2/5</div> 
          <a href="#two!" class="carousel-item"><img src="img/two.png" style="width: 100%"></a> 
        </div> 
        <div class="mySlides fade"> 
          <div class="numbertext">3/5</div> 
          <a href="#three!" class="carousel-item"><img src="img/three.png" style="width: 100%"></a> 
        </div> 
        <div class="mySlides fade"> 
          <div class="numbertext">4/5</div> 
          <a href="#four!" class="carousel-item"><img src="img/four.png" style="width: 100%"></a> 
        </div> 
        <div class="mySlides fade"> 
          <div class="numbertext">5/5</div> 
          <a href="#five!" class="carousel-item"><img src="img/five.png" style="width: 100%"></a> 
        </div> 
        <a class="prev" onclick="plusSlides(-1)">&#10094</a> 
        <a class="next" onclick="plusSlides(1)">&#10095</a> 
      </div> 
      <br> 
      <div style="text-align: center;"> 
        <span class="dot" onclick="currentSlide(1)"></span> 
        <span class="dot" onclick="currentSlide(2)"></span> 
        <span class="dot" onclick="currentSlide(3)"></span> 
        <span class="dot" onclick="currentSlide(4)"></span> 
        <span class="dot" onclick="currentSlide(5)"></span> 
      </div>

Answer 1

Слайдер вообще можно сделать без единой строчки скрипта, пример:

*,*:after,*:before { 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	padding: 0; 
	margin: 0; 
	outline: 0; 
} 
/*стили выше добавлены только для этого примера, в реальном проекте не использовать*/ 
html,body { 
	width: 100%; 
} 
 
.wrap-slider { 
	position: relative; 
	height: 400px; 
	width: 100%; 
	min-width: 767px; 
	background: #2C3E50; 
	border: 5px solid; 
	overflow: hidden; 
} 
 
.wrap-slider>.first-slide, 
.wrap-slider>.second-slide, 
.wrap-slider>.third-slide { 
	position: absolute; 
	display: inline-block; 
	height: 100%; 
	width: 100%; 
	z-index: 1; 
} 
 
.wrap-slider>.first-slide { 
	left: 0; 
	-webkit-transform: translatex(-100%); 
	    -ms-transform: translatex(-100%); 
	        transform: translatex(-100%); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
	-webkit-animation: scrollFirstSlider 20s linear infinite; 
	        animation: scrollFirstSlider 20s linear infinite; 
} 
 
.wrap-slider>.second-slide { 
	left: 0; 
	-webkit-transform: translatex(0); 
	    -ms-transform: translatex(0); 
	        transform: translatex(0); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
	-webkit-animation: scrollSecondSlider 20s linear infinite; 
	        animation: scrollSecondSlider 20s linear infinite; 
} 
 
.wrap-slider>.third-slide { 
	left: 0; 
	-webkit-transform: translatex(100%); 
	    -ms-transform: translatex(100%); 
	        transform: translatex(100%); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
	-webkit-animation: scrollThirdSlider 20s linear infinite; 
	        animation: scrollThirdSlider 20s linear infinite; 
} 
 
.wrap-slider .wrap-in { 
	width: 400px; 
	text-align: center; 
	margin: 100px auto; 
} 
 
.wrap-slider .wrap-in>img { 
	-webkit-border-radius: 50%; 
	        border-radius: 50%; 
} 
 
.wrap-slider>input[type="radio"] { 
	position: absolute; 
	clip: rect(0, 0, 0, 0); 
} 
 
.wrap-slider>label { 
	position: absolute; 
	z-index: 999; 
	height: 10px; 
	width: 10px; 
	-webkit-border-radius: 50%; 
	        border-radius: 50%; 
	background: #fff; 
} 
 
.wrap-slider>label:hover { 
	cursor: pointer; 
} 
 
.wrap-slider>label[for="secondItem"] { 
	top: 90%; 
	left: 50%; 
	-webkit-transform: translate(-50%,-90%); 
	    -ms-transform: translate(-50%,-90%); 
	        transform: translate(-50%,-90%); 
	-webkit-animation: lightLabelTwo 20s linear infinite; 
	        animation: lightLabelTwo 20s linear infinite; 
} 
 
.wrap-slider>label[for="firstItem"] { 
	top: 90%; 
	left: 47%; 
	-webkit-transform: translate(-47%,-90%); 
	    -ms-transform: translate(-47%,-90%); 
	        transform: translate(-47%,-90%); 
	-webkit-animation: lightLabelOne 20s linear infinite; 
	        animation: lightLabelOne 20s linear infinite; 
} 
 
.wrap-slider>label[for="thirdItem"] { 
	top: 90%; 
	left: 53%; 
	-webkit-transform: translate(-53%,-90%); 
	    -ms-transform: translate(-53%,-90%); 
	        transform: translate(-53%,-90%); 
	-webkit-animation: lightLabelThree 20s linear infinite; 
	        animation: lightLabelThree 20s linear infinite; 
} 
 
#firstItem:checked~label[for="firstItem"], 
#secondItem:checked~label[for="secondItem"], 
#thirdItem:checked~label[for="thirdItem"] { 
	background: #000; 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s;	 
} 
 
input[type='radio']:checked ~ .first-slide, 
input[type='radio']:checked ~ .second-slide, 
input[type='radio']:checked ~ .third-slide {  
	-webkit-animation: scrollFirstSlider paused,scrollSecondSlider paused,scrollThirdSlider paused;  
	        animation: scrollFirstSlider paused,scrollSecondSlider paused,scrollThirdSlider paused; 
} 
input[type='radio']:checked~label[for="firstItem"], 
input[type='radio']:checked~label[for="secondItem"], 
input[type='radio']:checked~label[for="thirdItem"]{ 
  -webkit-animation: lightLabelOne paused,lightLabelTwo paused,lightLabelThree paused; 
          animation: lightLabelOne paused,lightLabelTwo paused,lightLabelThree paused; 
} 
 
#firstItem:checked ~ .first-slide, 
#secondItem:checked~.second-slide, 
#thirdItem:checked~.third-slide { 
	-webkit-transform: translatex(0); 
	    -ms-transform: translatex(0); 
	        transform: translatex(0); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
} 
 
#firstItem:checked ~ .second-slide, 
#secondItem:checked ~ .third-slide { 
	-webkit-transform: translatex(100%); 
	    -ms-transform: translatex(100%); 
	        transform: translatex(100%); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
} 
 
#firstItem:checked ~ .third-slide { 
	-webkit-transform: translatex(200%); 
	    -ms-transform: translatex(200%); 
	        transform: translatex(200%); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
} 
 
#secondItem:checked ~ .first-slide, 
#thirdItem:checked ~ .second-slide { 
	-webkit-transform: translatex(-100%); 
	    -ms-transform: translatex(-100%); 
	        transform: translatex(-100%); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
} 
 
#thirdItem:checked ~ .first-slide { 
	-webkit-transform: translatex(-200%); 
	    -ms-transform: translatex(-200%); 
	        transform: translatex(-200%); 
	-webkit-transition: 1s; 
	-o-transition: 1s; 
	transition: 1s; 
} 
 
@-webkit-keyframes scrollFirstSlider { 
	0%,50%,100% { 
		-webkit-transform: translatex(-100%); 
		        transform: translatex(-100%); 
	} 
 
	25% { 
		-webkit-transform: translatex(-200%); 
		        transform: translatex(-200%); 
	} 
 
	75% { 
		-webkit-transform: translatex(0); 
		        transform: translatex(0); 
	} 
} 
 
@keyframes scrollFirstSlider { 
	0%,50%,100% { 
		-webkit-transform: translatex(-100%); 
		        transform: translatex(-100%); 
	} 
 
	25% { 
		-webkit-transform: translatex(-200%); 
		        transform: translatex(-200%); 
	} 
 
	75% { 
		-webkit-transform: translatex(0); 
		        transform: translatex(0); 
	} 
} 
 
@-webkit-keyframes scrollSecondSlider { 
	0%,50%,100% { 
		-webkit-transform: translatex(0); 
		        transform: translatex(0); 
	} 
 
	25% { 
		-webkit-transform: translatex(-100%); 
		        transform: translatex(-100%); 
	} 
 
	75% { 
		-webkit-transform: translatex(100%); 
		        transform: translatex(100%); 
	} 
} 
 
@keyframes scrollSecondSlider { 
	0%,50%,100% { 
		-webkit-transform: translatex(0); 
		        transform: translatex(0); 
	} 
 
	25% { 
		-webkit-transform: translatex(-100%); 
		        transform: translatex(-100%); 
	} 
 
	75% { 
		-webkit-transform: translatex(100%); 
		        transform: translatex(100%); 
	} 
} 
 
@-webkit-keyframes scrollThirdSlider { 
	0%,50%,100% { 
		-webkit-transform: translatex(100%); 
		        transform: translatex(100%); 
	} 
 
	25% { 
		-webkit-transform: translatex(0); 
		        transform: translatex(0); 
	} 
 
	75% { 
		-webkit-transform: translatex(200%); 
		        transform: translatex(200%); 
	} 
} 
 
@keyframes scrollThirdSlider { 
	0%,50%,100% { 
		-webkit-transform: translatex(100%); 
		        transform: translatex(100%); 
	} 
 
	25% { 
		-webkit-transform: translatex(0); 
		        transform: translatex(0); 
	} 
 
	75% { 
		-webkit-transform: translatex(200%); 
		        transform: translatex(200%); 
	} 
} 
 
@-webkit-keyframes lightLabelOne { 
	0%,25%,50%,100% { 
		background: #fff; 
	} 
 
	75% { 
		background: #000; 
	} 
} 
 
@keyframes lightLabelOne { 
	0%,25%,50%,100% { 
		background: #fff; 
	} 
 
	75% { 
		background: #000; 
	} 
} 
 
@-webkit-keyframes lightLabelTwo { 
	0%,50%,100% { 
		background: #000; 
	} 
 
	25%,75% { 
		background: #fff; 
	} 
} 
 
@keyframes lightLabelTwo { 
	0%,50%,100% { 
		background: #000; 
	} 
 
	25%,75% { 
		background: #fff; 
	} 
} 
 
@-webkit-keyframes lightLabelThree { 
	0%,50%,75%,100% { 
		background: #fff; 
	} 
 
	25% { 
		background: #000; 
	} 
} 
 
@keyframes lightLabelThree { 
	0%,50%,75%,100% { 
		background: #fff; 
	} 
 
	25% { 
		background: #000; 
	} 
}
<div class="wrap-slider"> 
  <input type="radio" name="slide-group" id="firstItem"/> 
  <input type="radio" name="slide-group" id="secondItem"/> 
  <input type="radio" name="slide-group" id="thirdItem"/> 
  <label for="firstItem"> </label> 
  <label for="secondItem"> </label> 
  <label for="thirdItem"></label> 
  <div class="first-slide"> 
    <div class="wrap-in"><img src="https://dummyimage.com/100x100/E67E22/fff.png" alt=""/> 
      <div class="text">Loremのイプサムの悲しみは、リベートをconsecteturをAMET座ります。、そうでない場合は、どこから来るので、不足して自分自身をScaurus？そこに義人が、それは、非難の一部を拒否し、生まれたように、それゆえ、人生のいずれかの一部または全部を、誰もがそれを支払う必要はありませんし、重視しているとき。スピーディーであります</div> 
    </div> 
  </div> 
  <div class="second-slide"> 
    <div class="wrap-in"><img src="https://dummyimage.com/100x100/79bf5e/fff.png" alt=""/> 
      <div class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum minus quia alias sint? Expedita iusto, illo, quasi reiciendis natus accusantium, magni omnis itaque aliquam neque nemo pariatur ipsam ullam vitae.</div> 
    </div> 
  </div> 
  <div class="third-slide"> 
    <div class="wrap-in"><img src="https://dummyimage.com/100x100/5e8cbd/fff.png" alt=""/> 
      <div class="text">أبجد هوز دولور الجلوس امات consectetur، والحسومات. Scaurus نفسه مع عدم وجود ل، وإلا، وأنها تأتي من؟ هو سريع عند الرجل الصالح، هناك، إلى حيث كانت، ولدت، ورفض بعض شجب، تولي أهمية كبيرة، لذلك، من بعض أو كل أي من الحياة، لا أحد لدفعها.</div> 
    </div> 
  </div> 
</div>

READ ALSO
2 меню slideout js
HTML

2 меню slideout js

При клике на Panel меню слева наезжает и неудобно нажимать на кнопку panel + появляется меню от Catalog PanelА само меню не отображается

 240
Как сделать подгрузку disabled date сразу?
jQuery

Как сделать подгрузку disabled date сразу?

Моя задача чтобы в каждом новом календаре, были неактивны даты выбранные в предыдущемДумал выбранные даты записывать в массив и делать их disabled

 270
Стилизация полей с помощью jQuery
jQuery

Стилизация полей с помощью jQuery

Как сделать что бы при нажатии на кнопку Calculate, если некоторые select со значением 0, они выделялись красной рамкой, а они сейчас выделяются все,...

 292
Как добавить только цифры и пробелы в input?
jQuery

Как добавить только цифры и пробелы в input?

Как ограничить вывод символов и их количество в input + через каждые 4 цифры ставить пробел

 354