# 캐러셀(carousel) 만들기 {% embed url="" %} 캐러셀 대표적 예시 (instagram) {% endembed %} 그럼 이미지 3장으로 간단한 캐러셀을 만들어보자.
이미지를 이런식으로 배치하고 버튼을 눌렀을 때 다른 이미지를 슬라이드 해주면 되겠다. {% code title="js010.html" %} ```html
``` {% endcode %} {% code title="main.css" %} ```css .slide-container { width: 300vw; transition: all 1s; } .slide-box { width: 100vw; float: left; } .slide-box img{ width: 100%; } ``` {% endcode %} 이렇게 하면 아래 스크롤 생김 slide-container 를 div로 감싸고 스타일을 주면 이미지 3개가 가로로 배치되고 나머지 2개의 이미지는 감춰진다. ```
``` 이렇게 하고 버튼을 누를 때마다 slide-container css에 아래 속성 중 하나를 주면 변경 됨 ``` margin-left: -200vw; transform: translateX(-100vw); ``` {% code title="js010.html" %} ```html ``` {% endcode %} 🎈Intellij 여러 줄 편집 Alt +Shift + Insert or Alt + 드래그 ✨ 과제. 1번과 3번 버튼도 완료해보자 ✨ 과제. 완료한사람은 이전, 다음 버튼 추가하고 기능을 만들어보자. {% code title="js010.html" %} ```html ``` {% endcode %} .slide-4 -5 이렇게 하면 헷갈리지 않나? prev next class 로 변경 네이밍의 중요성! 사진이 무조건 3장으로 고정일까? 4장 5장 그 이상이 되면 어떻게 해야할까? (확장성 고려) ```javascript $('.prev').on('click', function (){ $('.slide-container').css('transform', 'translateX(-'+(picture-2)+'00vw)'); picture--; }) $('.next').on('click', function (){ $('.slide-container').css('transform', 'translateX(-'+picture+'00vw)'); picture++; }) ``` 이렇게 하면 완성 🔥이렇게 하면 두가지 오류가 있음 찾아보고 수정 해보자. 1. 1번사진일때 이전 버튼을 계속 눌릴경우 or 마지막 사진일때 다음버튼을 계속 눌릴경우 2. n번 버튼을 누를 때 그이후엔 정상적 동작 안함 {% code title="js010.html" %} ```html Bootstrap demo

로그인하세요

5초 이내에 구매 시 사은품 증정!
``` {% endcode %} ![](https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Fb4YABEoB177iNnDYCFZy%2Fcolor1.png?alt=media\&token=c24f6647-25f4-45c5-8196-99b5c0b0e4a1)
![](https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FAg0peJlF88aBJbBzYIMi%2Fcolor3.png?alt=media\&token=da1a4c28-02a1-450a-8b61-fba965a87d0c) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/carousel.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.