한페이지에 2개이상의 자동 이미지 슬라이드 질문드립니다!
본문
밑의 코드로 하나의 자동 이미지슬라이드를 만들었는데요, 2개 이상의 이미지 슬라이드를 만들면
에러 비슷하게 나는데, 클래스 네임을 바꾸라고들 하시는데 감이 안잡힙니다..
어떻게 바꾸면 2개 이상을 사용할 수 있을까요..?
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="new.css">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
a{
text-decoration:none;
}
.main{
margin-top:40px;
text-align:center;
font-size:1.7em
}
.wear{
margin-top:2em;
text-align: center;
font-size:30px;
}
.nav1{
text-align: center;
font-family: 'Hepta Slab', serif;
font-weight: 300;
word-spacing: 5em;
color:black;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
text-align:center;
}
.slideshow-container2 {
max-width: 1000px;
position: relative;
margin: auto;
text-align:center;
}
/* Caption text */
.text {
color: #000000;
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 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
body {
margin: 0; height:3000px;
}
ul {
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
left: 0px;
top: 0px;
background-color: #f1f1f1;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
margin-top: 89px;
background-color: #c6a39c;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
<body>
<div class="main">
<h3><a href="brands.html">Brand<h3>
</div>
<div class="nav1">
<a href="wear.html" style="text-decoration:none;">Wear</a>
<a href="#" style="text-decoration:none;">Jewelry</a>
<a href="#" style="text-decoration:none;">Watch</a>
</div>
<ul>
<li><a class="active" href="wear.html">Wear</a></li>
<li><a href="jewelry.html">Jewelry</a></li>
<li><a href="watch.html">Watch</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div class="wear">
Wear
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="496458_X9I07_4696_001_100_0000_Light-GG.jpg" style="width: 500px; height: 450px;">
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="menclp-03-01-img_pre-fall-101019-mob.jpg" style="width: 500px; height: 450px;">
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="ah8262l-2cq-sub1.20190731095031547823.smn.jpg" style="width: 500px; height: 450px;">
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script type="text/javascript">
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2900); // Change image every 2 seconds
}
</script>
</body>
</html>
답변 1
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
이 부분으로 슬라이드를 변경하는데요..
복사한 2번째 소스 부분에서는 아래와 같이 동일한 이름들을 찾아서 모두 수정해주세요.
mySlides => mySlides2
dot => dot2
