슬라이드

[설미선]

carousel 은 잘 해결되었음다 감사합니다 

근데 다음 파트인 next또한 잘되어서 prev를 추가해보았는데 

next처럼 이미지에 안뜨고  마지막페이지를 넘기고 백지페이지에 나타나요 ㅜㅜ 

슬라이드구현은 되는데 "prev " 버튼이 안보임 

<div style="overflow:hidden; position:relative">
          <button class="prev">PREV</button>
         <div class="slide-container">
          <div class="slide-box">
       
          </div>
        <div class="slide-box">
         
          </div>

          <div class="slide-box">
                     
          </div>
        </div>
        <button class="next">NEXT</button>
        </div>
       
 
        <button class="slide-1">1</button>
        <button class="slide-2">2</button>
        <button class="slide-3">3</button>

        <div class="my-5"></div>

        <script>

          var 지금보이는사진 = 1;

          $('.next').click(function(){
         
              $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
              지금보이는사진 = 지금보이는사진 + 1;
             
            });

            $('.prev').click(function(){
         
         $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
         지금보이는사진 = 지금보이는사진 - 1;
         
       });

 

.prev {
    position:absolute;
    background-color:transparent;
    color:darkcyan;
    top:45%;
    left:0;
    text-align: center;
    border-radius: 50%;
    padding:10px 20px;
    font-size:20px;
    cursor:pointer;  
}
.prev {
    left:10px;
}
.prev:hover {
    transform:translateX(-10px);
}
.next {
    position:absolute;
    background-color:transparent;
    color:darkcyan;
    top:45%;
    right:0;
    text-align: center;
    border-radius: 50%;
    padding:10px 20px;
    font-size:20px;
    cursor:pointer;  
}
.next {
    right:10px;
}
.next:hover{
    transform:translateX(10px);
}

그리고  두번째질문이요~~~

강의내용중 javascript 트리거 란 단어를 사용하시는데 이게 정확하게 무얼 뜻하는걸까요?? 카톡으로 문의 드렸는데 javascript 이벤트리스너같다고 하시는데 이게 맞는건가요?

[codingapple]

왜냐면 지금보이는사진이 3일 때 prev 버튼 누르면 

-300vw로 변경하라고 코드짜놔서 그렇습니다 그럼 4번째 사진이 보이거나 그러겠군요

트리거는 그냥 자바스크립트로 어떨 때 ui 변경해주고싶은지 코드짜라는 뜻입니다

 

[글쓴이]

글