컴퓨터 정보/javascript

javascript : 슬라이드 만들기

혜닝혜루 2022. 12. 7. 17:42
728x90
반응형
<!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">
  <link rel="stylesheet" href="stylee.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <title>Document</title>
</head>
<body class="">


 <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

  
  </script>


<!-- 슬라이드 -->
<div style="overflow: hidden">
  <div class="slide-container">
    <div class="slide-box">
      <img src="./이미지/car1.png">
    </div>
    <div class="slide-box">
      <img src="./이미지/car2.png">
    </div>
    <div class="slide-box">
      <img src="./이미지/car3.png">
    </div>
  </div>
</div> 

<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">다음</button>
<button class="before">이전</button>
  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
 
<script>


var 지금사진 = 1;
$('.slide-1').on('click',function(){
    지금사진 = 1;
    document.querySelector('.slide-container').style.transform='translateX(0vw)'
  })

  $('.slide-2').on('click',function(){
    지금사진 = 2;
    document.querySelector('.slide-container').style.transform='translateX(-100vw)'
  })

  $('.slide-3').on('click',function(){
    지금사진 = 3;
    $('.slide-container').css('transform','translateX(-200vw)')
  })




    $('.next').on('click', function () {
     
      if(지금사진 >= 3){
        $('.slide-container').css('transform', 'translateX(-200vw)')
      
      }else{
        $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)');
        지금사진 +=1;
      }
      
      })

          $('.before').on('click', function () {

            if(지금사진 <= 0 ){
              document.querySelector(".slide-container").style.transform='translateX(0vw)'

            }else{
          $('.slide-container').css('transform', 'translateX(-' + (지금사진 -2) + '00vw)');
      지금사진 -= 1;
            }
        })







</script>

</body>
</html>

 

나에게는 너무 어려웠던 슬라이드 만들기.... 몇일뒤 다시한번 도전해 봐야겠다.

코드를 보면 이해가 가는데 막상 만들려하면 멍때리게 된다 ㅠㅠ ...

728x90