슬라이드 자바스크립트 코드

  • html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   
    <!-- code for using fontawesome icon -->
    <script src="https://kit.fontawesome.com/ebe0a50799.js" crossorigin="anonymous"></script>
<!-- css -->
<link rel="stylesheet" href="style.css">
<!-- javascript -->
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
       
        <a class="prev-btn" onclick="moveSlides(-1)"> <i class="fas fa-caret-left fa-2x"></i></a>

        <div class="slides-container">
            <div class="slide-image">
                <img src="img/nonage.PNG" alt="">
            </div>

            <div class="slide-image">
                <img src="img/nonage2.PNG" alt="">
            </div>

            <div class="slide-image">
                <img src="img/nonage3.PNG" alt="">
            </div>

        </div>


            <a class="next-btn" onclick="moveSlides(1)"><i class="fas fa-caret-right fa-2x"></i></a>

            <div class="navigation-dots">
            <div class="single-dot"  onclick="currentSlide(0)"></div>
            <div class="single-dot active"  onclick="currentSlide(1)"></div>
            <div class="single-dot"  onclick="currentSlide(2)"></div>
        </div>
      </div>
    
<script src="script.js" defer></script>
</body>
</html>
  • css
body{
    margin:0;
    box-sizing:border-box;
    background-color: #222;

}
.wrapper{
    width:100%;

}
.slides-container{
    height:500px;
    position: relative;
}
.slide-image{
    width: 100%;
    height: 100%;
    position:absolute;
}

.slide-image img{
    width: 100%;
    height:100%;
    object-fit:cover;
}

.next-btn, .prev-btn{
    background-color: rgb(212, 198, 198);
    padding:16px;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    z-index:100;
    cursor: pointer;
    transition:400ms;
    font-size: 20px;


}
.next-btn:hover, .prev-btn:hover{
    background-color: hotpink;

}

.next-btn{
    right: 0;
   
}

.prev-btn{
    left: 0;
}

.navigation-dots{
    display:flex;
    z-index:100;
    height:32px;
    align-items: center;
    justify-content: center;
    margin:16px 0;
}

.single-dot{
    background-color: darkcyan;
    height: 16px;
    width: 16px;
    border:2px solid;
    border-radius: 50%;
    cursor: pointer;
    transition:400ms;
    margin: 0 8px;
    z-index:100;
    display: flex;
}

.single-dot.active {
    background-color: white;
}
  • js
var slideIndex = 0; //slide index

// HTML 로드가 끝난 후 동작
window.onload=function(){
  showSlides(slideIndex);

  // Auto Move Slide
  var sec = 3000;
  setInterval(function(){
    slideIndex++;
    showSlides(slideIndex);

  }, sec);
}


// Next/previous controls
function moveSlides(n) {
  slideIndex = slideIndex + n
  showSlides(slideIndex);
}

// Thumbnail image controls
function currentSlide(n) {
  slideIndex = n;
  showSlides(slideIndex);
}

function showSlides(n) {

  var slides = document.getElementsByClassName("slide-image");
  var dots = document.getElementsByClassName("single-dot");
  var size = slides.length;

  if ((n+1) > size) {
    slideIndex = 0; n = 0;
  }else if (n < 0) {
    slideIndex = (size-1);
    n = (size-1);
  }

  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[n].style.display = "block";
  dots[n].className += " active";
}

결과

코드출처
https://myhappyman.tistory.com/13

5. Leetcode - Longest Paildrome Substring [투포인터]
카카오 2021 #1 - 신규아이디 추천

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage