[JS / CSS] 캐러셀 만들기 (숫자 버튼)

캐러셀 만들기
- 버튼 클릭으로 이동

HTML

 <!-- 6) 캐러셀 만들기 -->
    <div>
      <div class="slide-container">
        <div class="slide-box">
          <img src="img/it 그림.jpg" />
        </div>
        <div class="slide-box">
          <img src="img/it 그림2.jpg" />
        </div>
        <div class="slide-box">
          <img src="img/it그림3.jpg" />
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <!-- 6-1)슬라이드 적용시켜 줄 버튼 생성 -->
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

반응형

CSS

/* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */
.slide-box img {
  width: 100%;
  height: 300px;
}
.slide-box {
  width: 100vw;
  float: left;
}

.slide-container {
  width: 300vw;
  transition: all 1s;
}

 

.slide-box img {
  width: 100%;
}

이미지 사이즈 일정하게 만들기 
이미지 브라우저에 꽉 차게 만듦 

 

.slide-box {
  width: 100vw;
  float: left;
} 

.slide-container 너비를 300vw로 설정함으로써, 이 컨테이너는 뷰포트의 세 배 너비를 가지게 됩니다.
이는 세 개의 슬라이드( .slide-box )가 각각 100vw 너비를 가짐을 의미

.slide-box 에 width: 100vw; 를 부여함으로써, 각 슬라이드가 뷰포트의 전체 너비를 차지

그리고 왼쪽으로 치우치게 해준다. 

---

HTML

    <div style="overflow: hidden">
      <div class="slide-container">
        <div class="slide-box">
          <img src="img/it 그림.jpg" />
        </div>
        <div class="slide-box">
          <img src="img/it 그림2.jpg" />
        </div>
        <div class="slide-box">
          <img src="img/it그림3.jpg" />
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <!-- 6-1)슬라이드 적용시켜 줄 버튼 생성 -->
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

div 태그로 또 감싸주고
overflow: hidden 써주면 넘치는 요소 숨길 수 있다.

div style="clear: both"></div> 이것도 float 를 사용했으니 사용

---

 2 번째 사진으로 보여지게 하는 방법 

JS

2번 버튼을 눌러야 두 번째 사진이 보여짐 ( 슬라이드 되면서 )
- 2번 버튼 하나만 기능구현 

 

 2 번째 사진으로 보여지게 하는 방법 

1) margin-left: -100vw; 

2) 2번 버튼 클릭시 transform : translateX(-100vw);  코드 추가

 

 

.slide-container {
  width: 300vw;
  transition: all 1s;
}

그리고 부드럽게 이동하게 하기위해 transition 적용하기

---

버튼2 누르면 최종화면으로 변하라고 코드

$('.slide-2').on('click', function() {
  $('.slide-container').css('transform', 'translateX(-100vw)');
});

2번 transform 사용

- 2번 버튼을 찾기.

$(".slide-2").on("click", function () {});

- slide-container 에다가 스타일 transform: translateX(-100vw); 부여

 

.css = 스타일 속성을 바꿔준다.

- jQuery로 찾은 요소에 .css() 주면 style 속성 변경이 가능

.css('transform', 'translateX(-100vw)');

---

버튼1 버튼3 기능 만들기

버튼3 눌러서 3번사진을 보여주고 싶으면 transform : translateX(-200vw) 를 추가

버튼1 눌러서 1번사진을 보여주고 싶으면 transform : translateX(0vw) 를 추가

$('.slide-1').on('click', function() {
  $('.slide-container').css('transform', 'translateX(0vw)');
});

$('.slide-2').on('click', function() {
  $('.slide-container').css('transform', 'translateX(-100vw)');
});

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

---

slide-box 가 아니라 slide-container 에다가 스타일 transform: translateX(-100vw); 부여하는 이유 

전체 슬라이드 그룹을 한 번에 움직여서 특정 슬라이드를 보여주기 위함

 

개별 슬라이드(.slide-box)가 아니라 슬라이드를 감싸고 있는 

컨테이너(.slide-container)의 위치를 조정함으로써, 

슬라이드 전체를 원하는 위치로 이동시키는 방식

 

.slide-container는 여러 .slide-box 요소(개별 슬라이드)를 포함

전체 컨테이너(따라서 모든 슬라이드)를 한 방향으로 동시에 이동

 

하나의 슬라이드만 이동해야되는게 아니라
다음 슬라이드도 같이 이동해야 함
2번사진만 오는게 아니라 우측에 3번 사진도 같이 와야 한다.

.slide-box 이 아닌  .slide-container 에다가 transition: all 1s; 에다가 부여한 이유

전체 슬라이드 콘텐츠를 한 번에 움직이기 위해서

 

컨테이너에 transition을 적용함으로써, 당신이 어떤 슬라이드 버튼을 클릭하든, 

전체 슬라이드 세트가 한꺼번에 부드럽게 이동