Carousel (이미지 슬라이드) 직접만들기 2 : Next 버튼 만들기

[한진욱]

var 지금보이는사진 = 1;

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

 

제가 작성한거에서도 3이후로 넘어가고

올려놓으신거 그대로 복사해서 붙여넣어도 3이상으로 넘어갑니다..

 

var 지금보이는사진 = 1;

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

 

이렇게 하니 3번째장 다음으로  안넘어가는데

 

var 지금보이는사진 = 1;

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

이거에서 안넘어가는 이유, 고칠부분을 알고싶습니다.

[codingapple]

코드를 해석해보자면

지금보이는사진 변수가 1일때는 

버튼누르면 -100vw해주고 지금보이는사진+1 해줍니다

지금보이는사진 변수가 2일때는 

버튼누르면 -200vw해주고 지금보이는사진+1 해줍니다

지금보이는사진 변수가 3일때는 

버튼누르면 -300vw해주고 지금보이는사진+1 안해줌 

이렇게 동작해서 그렇습니다 

변수가 3일때 이미지 이동시키지 말라고 조건을 걸거나 그러면 되겠군요

 

그리고 return 오른쪽엔 보통 함수를 사용하고 나서 그 자리에 뱉고싶은 자료를 입력하는게 일반적입니다 

[박누리]

안녕하세요~ 저도 Next버튼을 눌러보니 자꾸 넘어가서 게시판에서 글을 찾아보다가 보게되었습니다.

변수가 3일때 이미지 이동시키지 말라고 조건을 걸면 된다고 하신 답변에

이렇게 해보았는데요...

혹시 좀더 간단한 방법이 또 있을까요..?

var 지금보이는사진 = 1;

$('.slide-next').click(function() {

    $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
    if ( 지금보이는사진 < 3 ) {
        지금보이는사진 = 지금보이는사진 + 1;
    }else if( 지금보이는사진 == 3 ){
      $('.slide-container').css('transform', 'translateX(-200vw)');
    }
});

[codingapple]

else if 는 없어도 잘 동작할 것 같은데요

[박누리]

var 지금보이는사진 = 1;

$('.slide-next').click(function() {

    $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
    if ( 지금보이는사진 < 3 ) {
        지금보이는사진 = 지금보이는사진 + 1;
      $('.slide-container').css('transform', 'translateX(-200vw)');
    }
});

 

아~ 이렇게 말씀하시는거군요!

그런데 혹시 저게 마지막 translateX(-200vw) 이부분에 -200vw 처럼 끝을 알 경우 말고~

for문으로 반복으로 임의으 수까지 돌려서 

마지막 위치를 설정해야할땐 무엇을 사용하면 좋을까요..?

 

[codingapple]

$('.slide-container').css('transform', 'translateX(-200vw)'); 이것도 굳이 필요는 없어보이고 

 if ( 지금보이는사진 < 2 ) { 로 바꾸거나 그러면 될듯요 

 

2나 3이라는 숫자를 하드코딩해놓는게 아니라

지금 사진이 몇개인지 세어달라고 하면 됩니다 그리고 그 갯수를 집어넣으면 되겠군요 

 

[정한별]

let 지금보이는사진갯수 = $('.slide-box').length;

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

이런식으로 코딩해봤는데 이미지3에서 다음으로 넘어가는데 문제가 무엇인가요??

 

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

이렇게  했을 때는 제대로 동작합니다. 그냥 이렇게 하는게 맞는건가요?

[김대일]

저도 이거 때문에 엄청 씨름했네요

아래와같이 하니 잘 작동합니다

공유차 답글달아요

        $('.slide-next').click(function() {
            if( 지금보이는사진 == 3){

            } else {
                $('.slide-container').css('transform', 'translateX(-' + 지금보이는사진 + '00vw)');
                if ( 지금보이는사진 < 3 ) {
                    지금보이는사진 = 지금보이는사진 + 1;
                }
            }

        });

[글쓴이]

글