자바스크립트 이미지 슬라이드 질문입니다.

조회수 949회

이미지 슬라이드를 만들기 위해서 css와 java를 코드펜에서 가져왔는데요

css는

@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  padding: 0;
  background-size: 100%;
}

.slider {
  position: relative;
  border: 1px solid black;
  width: 100%;
  height: 1024px;
  background-color: #ccc;
  margin: 0 auto;
}

.slider_nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width:100%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  z-index: 100;
}

.slideBtn {
  color: white;
  opacity: 0.7;
  text-decoration: none;
  display: inline-block;
  font-size: 2rem;
}

.slideBtn.active {
  opacity: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all .2s ease-in-out;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-size: cover;
  background-repeat: no-repeat;
}

.slide_content {
  position:absolute;
  left:20%;
  top:30%;
  padding:20px;
  background-color: rgba(0,0,0,.4);
  border-radius:3px;

}

.slide_content > * {
  color:white;
  opacity:1;
}

.slide.active {
  opacity: 1;
}

.secondary_nav {
  position:absolute;
  top: 0;
  width:15%;
  height:100%;
  z-index:500;
  opacity: 0.3;
  transition: opacity 0.2s ease-in-out;
  cursor:pointer;
  color:white;
  font-size:4rem;
}

.secondary_nav:hover{
  opacity:0.8;
}

.backBtn {
  left:0;
  background: linear-gradient(to right, rgba(0,0,0,0.5),rgba(0,0,0,0));
}
.backBtn:before {
  content:'\02039';
  position:absolute;
  top:50%;
  left:25%;
  transform: translateY(-60%);
}

.fwdBtn {
  right:0;
  background: linear-gradient(to left, rgba(0,0,0,0.5),rgba(0,0,0,0));
}

.fwdBtn:before {
  content:'\0203A';
  position:absolute;
  top:50%;
  right:25%;
  transform: translateY(-60%); /*bump it back up half its height*/
}


.image1 {
  background-image: url(../img/MAIN.jpg);
}

.image2 {
  background-image: url(../img/eb6fdaa2ed6aa6b81a26382fec4704f7.jpg);
}

.image3 {
  background-image: url(../img/rayban-11.jpg);
}

적용이 잘 되는데

var btns = document.querySelectorAll(".slideBtn");
var backBtn = document.querySelector(".backBtn");
var fwdBtn = document.querySelector(".fwdBtn");
var slides = document.querySelectorAll(".slide");

var activeSlide = 0;
function advanceSlides(count) {
  if (!count) {
    count = 1;
  }
  activeSlide = activeSlide + count;
  if (activeSlide == slides.length) {
    activeSlide = 0;
  }
  if (activeSlide < 0) {
    activeSlide = slides.length - 1;
  }
  showSlide(activeSlide);
}

function showSlide(slideIndex) {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
    btns[i].classList.remove("active");
  }
  btns[slideIndex].classList.add("active");
  slides[slideIndex].classList.add("active");

}

var handleClick = function(evt) {
  var slideNumber = evt.target.getAttribute("data-slide-target");
  var slideIndex = slideNumber - 1;
  //if this is the first click stop the auto slide
  if (intervalId) {
    window.clearInterval(intervalId);
  }
  showSlide(slideIndex);
  return false;
};

var fwdClick = function(evt) {
  if (intervalId) {
    window.clearInterval(intervalId);
  }
  advanceSlides();
};

var backClick = function(evt) {
  if (intervalId) {
    window.clearInterval(intervalId);
  }
  advanceSlides(-1);
};

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", handleClick);
}

backBtn.addEventListener("click", backClick);
fwdBtn.addEventListener("click", fwdClick);

//start slider
var intervalId = window.setInterval(advanceSlides, 3000);

자바를 입력하면 좌우로 움직이질 않아서요...

자동으로 움직이게 할순없나요 ㅠㅠ

아 그리고 자동이 아니여도 다음 페이지 사진 자체가 안보여요 ㅠㅠ

  • 이건 HTML 부분도 같이 올리셔야 도와주실 분들이 실행을 해보겠는데요? 그리고 자바와 자바스크립트는 다르니 정확히 구분해주세요. 편집요청빌런 2018.11.13 17:53
  • codepen 주소를 적어주세요 정영훈 2018.11.13 18:31

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)