뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, 딱 자바스크립트 3줄로 만드는 DIY 이미지 슬라이더 (Carousel)
서원석님의 학습노트

바닐라 자바스크립트 3줄로 만드는 Carousel(슬라이더)

#전체
#개발자
#프론트엔드
#자바스크립트
#javascript
#jquery
#이미지슬라이드
#flick
#slick
#bxslider
#슬라이드 만들기
#자바스크립트 슬라이더
#javascript 슬라이더
#js
#라이브러리
#플러그인
00:00영상 내용과는 무관한 노트 해당 영상 내용을 React로 구현한 코드는 여기서 참고해주세요 링크: https://github.com/westone034626/ReactPractice/tree/main/src/Carousel
00:03슬라이더란?(Carousel) *Carousel(캐러셀)을 구글에 검색하니까 이미지란에 회전목마가 나오네요?
00:15(~00:38)해당 영상 어필 타임(건너뛰어도 무방)
00:39HTML 코드 작성
01:46그림을 통한 설명(어떻게 구현할지)
02:32CSS 코드 작성
03:59overflow: hidden 설명: 창문이 있는 방을 상상해보세요. 그리고 창문으로 흘러가는 구름을 지켜본다고 상상해보세요. 구름이 너무너무너무 커서 우리가 창문으로 볼 수 있는 구름의 크기는 일부분이라고 생각해볼게요. 여기서 창문은 overflow: hidden이 적용된 div라고 생각하면 되고 구름은 container div라고 생각하시면 됩니다. 실제 구름의 크기와는 상관없이 우리가 볼 수 있는 영역은 창문의 크기로 제한됩니다.
04:10버튼 만들기
05:22container div에 transform 적용함으로써 내부 보여지는 이미지 변경
05:39margin 대신에 transform으로 container를 조작하는 이유
06:17script(javascript) 코드 작성 *button 눌렀을 때 container div에 transform 적용되도록
08:31transform에 animation 넣기(transition)
09:27버튼 3의 기능에 대한 코드 작성
10:06영상 끝 and 과제
✔ 학습 완료

이런 러닝패스는 어때요?

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기