이미지 슬라이드 만들기

이미지 슬라이드 만드는 순서는 다음과 같다.

1. 먼저 html 과 css로 이미지를 만들어준다.

출처는 코딩애플

2. 자바스크립트로 버튼을 누르면 화면이 옮겨지는 기능을 추가한다

참고로, 아래 기능은 화면이 흘러넘칠때 자동으로 생기는 스크롤을 없애준다

<div style="overflow: hidden;">

 

-html

<div style="overflow: hidden;">
      <div class ="slide-container">
        <div class ="slide-box">
        <img src ="./ponyo016.jpg">
        </div>
        <div class ="slide-box">
        <img src ="./ponyo036.jpg">
        </div>
        <div class ="slide-box">
        <img src ="./ponyo021.jpg">
        </div>
      </div>
</div>

    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

-javascript

css 에서 클래스를 탈부착하는 방식으로 화면을 이동시킬수도 있지만, 이동시키는 값 ( 'translateX(-100vw)' => 굵은글씨)을 항상 변화시키려고 하기 때문에 자바스크립트를 사용해보겠다

 

100vw는 현재브라우저 화면이 꽉찬 폭이다.

따라서 -100vw 면 현재 화면 폭만큼 왼쪽으로 이동한다는 의미이다

   //1번 버튼 클릭시 1번사진이 보이는 transform 기능을 추가해주세요
    $(".slide-1").on('click',function(){
    $('.slide-container').css('transform','translateX(0vw)');
    });

    //2번 버튼 클릭시 transform 기능을 추가해주세요
    $('.slide-2').on('click',function(){
     $('.slide-container').css('transform','translateX(-100vw)');
    });

    //3번 버튼 클릭시 3번사진이 보이는 transform 기능을 추가해주세요
    $(".slide-3").on('click',function(){
    $('.slide-container').css('transform','translateX(-200vw)');
    });

 

 

 

다음버튼을 누르면 이미지 슬라이드

<button class="next">다음</button>

html에 다음버튼 추가하기

 

<script>
    //다음버튼 기능
    //다음버튼 클릭했을때 지금 1번사진이면 2번사진으로
    //다음버튼 클릭했을때 지금 2번사진이면 3번사진으로

    let 지금사진 = 1;

    $('.next').on('click',function(){
    if(지금사진 === 1){
    $('.slide-container').css('transform','translateX(-100vw)');
     지금사진 += 1; //지금사진이 2가 되었으니 업데이트
    }else if(지금사진 === 2){
      $('.slide-container').css('transform','translateX(-200vw)');
      지금사진 += 1;
    }
    });
</script>