Carousel does not work.
I am writing on the textbook, but it does not work.

var slideIndex = 1; var showSlides = slideIndex; function plusSlides(n){ showSlides(slideIndex += n); } function currentSlide(n){ showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = getElementsByClassName(mySlides); var dots = 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"; } 
 .slider { max-width: 100px; 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: .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); } .textimg { position: absolute; top: 0; color: red; font-size: 12px; padding: 8px 12px; } .dot { cursor: pointer; width: 13px; height: 13px; margin: 0 2px; 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 fade{ from{opacity: .4} to{opacity: 1} } @keyframes fade { from{opacity: .4} to{opacity: 1} } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="D:\asdas\css.css"> <script src="D:\asdas\main.js"></script> </head> <body> <div class="slider"> <div class="mySlides fade"> <div class="numbertext">1/3</div> <img src="D:/page2/img/img9.jpg" style='width: 100%'" alt="o"> <div class="textimg">text</div> </div> <div class="slides fade"> <div class="numbertext">2/3</div> <img src="D:/page2/img/img8.jpg" style='width: 100%'" alt="o"> <div class="textimg">text</div> </div> <div class="slides fade"> <div class="numbertext">3/3</div> <img src="D:/page2/img/img6.jpg" style='width: 100%'" alt="o"> <div class="textimg">text</div> </div> <a onclick="plusSlides(-1)" class="prev">&#10094</a> <a onclick="plusSlides(1)" class="next">&#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> </div> </body> </html>

Closed due to the fact that off-topic participants andreymal , mymedia , Pavel Mayorov , Darth , ishidex2 Oct 17 '17 at 18:51 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - andreymal, mymedia, Pavel Mayorov, Darth, ishidex2
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 3
    Hello! If you run your code here, you immediately get the error “getElementsByClassName is not defined". "Where is this function" getElementsByClassName "? Maybe you have not written your code here completely. All the you! - Alexander Kazakov
  • one
    there is no such lie - ishidex2

2 answers 2

one). I found your tutorial and code, now everything works:

 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"; } 
 * { box-sizing: border-box } /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } .mySlides { display: none; } img { width: 100%; height: auto; } /* Next & previous buttons */ .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; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .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; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } 
 <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="http://via.placeholder.com/1000x350/00BFFF/FFFFFF?text=1" alt=""> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div><img src="http://via.placeholder.com/1000x350/90EE90/FFFFFF?text=2" alt=""> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="http://via.placeholder.com/1000x350/FFA500/FFFFFF?text=3" alt=""> <div class="text">Caption Three</div> </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> </div>

2). I also decided to write a carousel for you, in native JavaScript, it looks more like a real carousel, and is more interesting than the one in your textbook, please:

 "use strict"; var slider = document.querySelector(".slider"); var sliderWidth = parseInt(getComputedStyle(slider).width); var sliderItems = slider.querySelector(".slider__items"); var sliderItemList = slider.querySelectorAll(".slider__item"); var sliderItemActive = slider.querySelector(".slider__item_active"); var sliderNavNext = slider.querySelector(".slider__nav-next"); var sliderNavPrev = slider.querySelector(".slider__nav-prev"); var sliderDotActive = slider.querySelector(".slider__dot_active"); var sliderItemsMarginLeft = parseInt(getComputedStyle(sliderItems).marginLeft); slider.addEventListener("click", function(event) { // Отслеживаем клики по слайдеру var target = event.target; if (target == sliderNavNext) { // Если клик был по кнопке «Следующий слайд» if ( sliderItemList[sliderItemList.length - 1].classList.contains( "slider__item_active" ) ) return; sliderItemActive.classList.remove("slider__item_active"); sliderItemActive = sliderItemActive.nextElementSibling; sliderItemActive.classList.add("slider__item_active"); sliderItemsMarginLeft -= sliderWidth; sliderItems.style.marginLeft = sliderItemsMarginLeft + "px"; sliderDotActive.classList.remove("slider__dot_active"); sliderDotActive = sliderDotActive.nextElementSibling; sliderDotActive.classList.add("slider__dot_active"); } if (target == sliderNavPrev) { // Если клик был по кнопке «Предыдущий слайд» if (sliderItemList[0].classList.contains("slider__item_active")) return; sliderItemActive.classList.remove("slider__item_active"); sliderItemActive = sliderItemActive.previousElementSibling; sliderItemActive.classList.add("slider__item_active"); sliderItemsMarginLeft += sliderWidth; sliderItems.style.marginLeft = sliderItemsMarginLeft + "px"; sliderDotActive.classList.remove("slider__dot_active"); sliderDotActive = sliderDotActive.previousElementSibling; sliderDotActive.classList.add("slider__dot_active"); } if (target.classList.contains("slider__dot")) { // Если клик был по кнопке «Точка» if (target.classList.contains("slider__dot_active")) return; sliderDotActive.classList.remove("slider__dot_active"); sliderDotActive = target; sliderDotActive.classList.add("slider__dot_active"); var sliderDotList = slider.querySelectorAll(".slider__dot"); for (var i = 0, length1 = sliderDotList.length; i < length1; i++) { if (target == sliderDotList[i]) { sliderItemActive.classList.remove("slider__item_active"); sliderItemActive = sliderItemList[i]; sliderItemActive.classList.add("slider__item_active"); } if (sliderDotList[i].classList.contains("slider__dot_active")) { sliderItemsMarginLeft = -sliderWidth * i; sliderItems.style.marginLeft = sliderItemsMarginLeft + "px"; } } } }); 
 .clearfix:after { content: ""; display: table; clear: both; } .slider { max-width: 500px; overflow: hidden; width: 100%; } .slider__items { width: 9999px; transition: margin .3s; } .slider__item { float: left; } .slider__img { display: block; height: auto; width: 100%; } .slider__dot { border-radius: 50%; cursor: pointer; height: 13px; width: 13px; } .slider__dot_active { background-color: #000000; } 
 <div class="slider"> <div class="slider__items clearfix"> <div class="slider__item slider__item_active"><img src="http://via.placeholder.com/500x350/00BFFF/FFFFFF?text=1" alt="" class="slider__img"></div> <div class="slider__item"><img src="http://via.placeholder.com/500x350/90EE90/FFFFFF?text=2" alt="" class="slider__img"></div> <div class="slider__item"><img src="http://via.placeholder.com/500x350/FFA500/FFFFFF?text=3" alt="" class="slider__img"></div> </div> <div class="slider__nav"> <button type="button" class="slider__nav-prev">Предыдущий слайд</button> <button type="button" class="slider__nav-next">Следующий слайд</button> </div> <div class="slider__dots"> <button type="button" class="slider__dot slider__dot_active"></button> <button type="button" class="slider__dot"></button> <button type="button" class="slider__dot"></button> </div> </div>

Everything is pretty simple here. I wrote comments, I hope the principle of work will be clear to you. And if not, please write a comment, and maybe I will comment on the code in more detail.

3). Also, let me leave a useful link to the JS carousel account:

Learn!

  • Many thanks to you! - Yaroslav Potapenko
  • @Yaroslav Potapenko Thank you for the feedback! True, for my answer, someone put a minus) Next time, please, immediately give us a link to the textbook. All you Yaroslav good! - Alexander Kazakov

You reprint the code "from the textbook" with errors.

 //var showSlides = slideIndex; ... var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot");