[CodingApple] 캐러셀(Carousel) 만들기

Nadia·2024년 2월 26일
0

CodingApple

목록 보기
10/20
post-thumbnail
post-custom-banner



캐러셀(Carousel) 만들기

캐러셀(Carousel): 슬라이드 형태로 여러 이미지를 볼 수 있는 콘텐츠


UI 애니메이션 만드는 법칙

  1. 시작 스타일 class 생성
    • 슬라이드 될 이미지 만들기(html, css)
  2. 최종 스타일 class 생성
    • 1번째 사진 왼쪽으로 밀기
  3. 원할 때 최종 스타일로 변하도록 구현
    • 2번 버튼 클릭 시 2번째 화면 나오게 하기
  4. transition 추가



이미지<img> 넣기

  1. 이미지를 파일의 폴더에 저장
  2. <img src="이미지명.png">로 넣기



2번째 화면 나오게 하기(1번째 사진 왼쪽으로 밀기)

  1. margin-left: -100vw;
    - 3번째 화면 = margin-left: -200vw;

  2. transform: translateX();
    • 성능 면에서 margin보다 더 좋음



이미지 아래 스크롤바 숨기기

overflow: hidden; : 넘치는 요소 숨기는 기능



스타일 속성 변경하기

  • JS: .style.속성
document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'

  • Jquery: .css(속성)
$('.slide-container').css('transform', 'translateX(-100vw)');



<slide-box>태그의 이미지(img) 크기 조절하기

.slide-box img { 
	...
}



float: left; : 왼쪽으로 배치



캐러셀(Carousel) 슬라이드 만들기


구현 계획

  1. 이미지 준비하기
    • 브라우저 크기, 위치 배치
.slide-container {
    width: 300vw;
    transition: all 1s;
}

.slide-box {
    width: 100vw;
    float: left; /* 왼쪽으로 배치 */
}

.slide-box img {
    width: 100%;
}
  1. 사진 버튼
    • 숫자 버튼을 누르면 해당 번호의 사진이 슬라이드 된다.
// 2번째 사진 불러오기
document.getElementsByClassName('slide-2')[0].addEventListener('click', function() {
    document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
});

  1. 다음, 이전 버튼
    • 다음 버튼 - 현재 사진이 1번이면 -> 2번 보여주기
    • 이전 버튼 - 현재 사진이 3번이면 -> 2번 보여주기
var now = 1; // 현재 사진 변수

document.querySelector('.next').addEventListener('click', function() {
  

    if (now == 3) { // 마지막 장에서 '다음'을 누르면 첫 번째 장이 나오도록
        document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
        now = 1;
    } else {
        document.querySelector(".slide-container").style.transform = "translateX(-" + now + "00vw)";
        now++;
    }
});

  1. transition 추가

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
</head>

<body>
    <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="index.js"></script>
</body>
</html>

index.js

// 사진 버튼
/* 2번 버튼 클릭 시 - 2번 사진 가져오기(1번 사진을 왼쪽으로 밀기) */
document.getElementsByClassName('slide-2')[0].addEventListener('click', function() {
    document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
});

// 3번 버튼
document.getElementsByClassName('slide-3')[0].addEventListener('click', function() {
    document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
});

// 1번 버튼
document.getElementsByClassName('slide-1')[0].addEventListener('click', function() {
    document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
});


// 다음 버튼 - 현재 사진이 1번이면 -> 2번 보여주기
var now = 1; // 현재 사진 변수

document.querySelector('.next').addEventListener('click', function() {
  
      // JS 확장 버전
    if (now == 3) { // 마지막 장에서 '다음'을 누르면 첫 번째 장이 나오도록
        document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
        now = 1;
    } else {
        document.querySelector(".slide-container").style.transform = "translateX(-" + now + "00vw)";
        now++;
    }
});

  // if (now == 1) { // 현재 사진이 1번이면 -> 2번 보여주기
  //     document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
  //     now++;
  // } else if (now == 2) { // 현재 사진이 2번이면 -> 3번 보여주기
  //     document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
  //     now++;
  // } else if (now == 3) { // 현재 사진이 3번이면 -> 다시 1번 보여주기
  //     document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
  // }

  // jQuery 확장 버전
  // $('.next').on('click', function(){
  //     $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)');
  //     지금사진 += 1;
  // })


// 이전 버튼
document.querySelector('.before').addEventListener('click', function() {
  
      // JS 확장 버전
    if (now == 1) { // 첫 번째 장에서 '이전'을 누르면 마지막 장이 나오도록
        document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
        now = 3;
    } else {
        document.querySelector(".slide-container").style.transform = "translateX(-" + (now - 2) + "00vw)";
        now--;
    }
  });

    // if (now == 1) { // 현재 사진이 1번이면 -> 3번 보여주기
    //     document.querySelector('.slide-container').style.transform = 'translateX(-200vw)'
    //     now = 3;
    // } else if (now == 2) { // 현재 사진이 2번이면 -> 1번 보여주기
    //     document.querySelector('.slide-container').style.transform = 'translateX(0vw)'
    //     now--;
    // } else if (now == 3) { // 현재 사진이 3번이면 -> 2번 보여주기
    //     document.querySelector('.slide-container').style.transform = 'translateX(-100vw)'
    //     now--;
    // }

main.css

.slide-container {
    width: 300vw; /* vw: 브라우저 폭 */
    /* 최종화면: 2번째 화면 나오게 하기 => 1번째 사진 왼쪽으로 밀기 */
    /* 1. margin-left: -100vw;  */
    /* - margin-left: -200vw; -> 3번째 화면 */
    /* 2. transform: translateX(); */
    /* - 성능 면에서 margin보다 더 좋음 */
    transition: all 1s;

}

.slide-box {
    width: 100vw;
    float: left;
    /* float: left; - 왼쪽으로 배치 */
}

.slide-box img {
    /* slide-box의 이미지(img) 크기 조절하기: .slide-box img { } */
    width: 100%;
    /* 브라우저에 맞게(100%) 조정 */
}



출처
코딩애플

profile
Nadia
비전공자 개발 일기
이전 포스트

[CodingApple] 이메일 형식 검사하기 / 정규표현식

다음 포스트

[CodingApple] 함수의 return

post-custom-banner

0개의 댓글