Infinite Slide/Carousel with CSS

wkdgusrhkd·2021년 2월 25일
0

Mini

목록 보기
1/3

종종 웹사이트에서 브랜드명들이 자연스럽게 이동하는 슬라이더를 보신적이 있을 것입니다.

우리는 이것을 slide 혹은 carousel이라고 부릅니다. slide는 많이 들어보셨을겁니다.
carousel컨베이어 벨트/회전목마의 뜻을 가진 단어입니다. 일정한 주기로 이동을 반복하는 모습이 같아서 carousel이라는 이름이 붙었겠죠?

이 슬라이더를 만드는 법에는 여러가지가 있습니다. 라이브러리를 사용할 수도 JS를 이용할 수도, css만을 이용해서 만들 수도 있습니다.

저는 CSS를 이용하여 infinite slide/Carousel을 만들어 보겠습니다.

📦 박스 만들기 📦

<div class="slider">
    <div class="slide-box">
        <div class="slide-item">item1</div>
        <div class="slide-item">item2</div>
        <div class="slide-item">item3</div>
        <div class="slide-item">item4</div>
        <div class="slide-item">item5</div>
        <div class="slide-item">item6</div>
        <div class="slide-item">item7</div>
        <div class="slide-item">item8</div>
    </div>
</div>
.slider{border: 2px solid #2d2d2d;}
.slide-box{display: flex; width: calc(300px * 16);}
.slide-item{width: 300px; height: 100px; background-color: #2d2d2d; border: 2px solid red; box-sizing: border-box; font-size: 24px; color: red; line-height: 100px; text-align: center;}

slide-itemwidth300px로 하였고, border가 있기 때문에 box-sizing: border-box;를 해주었습니다.

calc()

요소의 너비를 줄 때 px, vw, %등을 많이 사용하는데 CSS3부터는 생겨난 calccss function으로서 자동으로 계산을 해줍니다.
이는 width뿐만 아니라, 다른 곳에서도 사용가능합니다. 자세한 내용은 MDN을 참고하세요.

본론으로 돌아와, slide-boxwidthcalc(300px * 16)로, 아이템 개수의 2배만큼 지정해준 이유는 후술할테니 참고하세요.

🎨 animation 🎨

@keyframes slide{
    0%{transform: translateX(0)}
    100%{transform: translateX(calc(-300px * 8));}
}

animation의 이름은 slide, 100%일 때, X축의 위치가 왼쪽으로, 8개 slide-item의 총합만큼 이동하도록 했습니다.

animationslide-box에 지정해줍니다.

.slide-box{display: flex; width: calc(300px * 16); animation: slide 20s linear infinite;}

↓↓ 적용한 모습 ↓↓

※ 화면밖을 넘어선 부분은 overflow: hidden;으로 없애주세요 :D
.slider{width: 100%; border: 2px solid #2d2d2d; overflow: hidden;}

빈 공간 없애기

빈 공간을 없애주어야 하는데요. html로 돌아와서 만들어두었던 slide-item을 복사해 두 배로 복사해주세요.

<div class="slide-box">
    <!-- original items -->
    <div class="slide-item">item1</div>
    <div class="slide-item">item2</div>
    <div class="slide-item">item3</div>
    <div class="slide-item">item4</div>
    <div class="slide-item">item5</div>
    <div class="slide-item">item6</div>
    <div class="slide-item">item7</div>
    <div class="slide-item">item8</div>

    <!-- copy same items -->
    <div class="slide-item">item1</div>
    <div class="slide-item">item2</div>
    <div class="slide-item">item3</div>
    <div class="slide-item">item4</div>
    <div class="slide-item">item5</div>
    <div class="slide-item">item6</div>
    <div class="slide-item">item7</div>
    <div class="slide-item">item8</div>
</div>

item8 뒤에 복사된 item1이 붙으면서 animation이 자연스럽게 반복되는 모습을 볼 수 있습니다.


slick이라는 플러그인을 사용하면 다양한 타입의 캐러셀을 손쉽게 만들 수 있습니다.
관심있으신 분은 Slick을 참고하세요.

infinite slide를 만드는 더 좋은 방법을 알게되면 새로운 글로 찾아오겠습니다. :D

소스코드는 이 곳을 참고하세요.

profile
프론트!

0개의 댓글