# Carousel

[넷플릭스 클론코딩] 슬라이드, 로딩 스피너 만들기
배너 밑의 영화리스트들을 슬라이더로 만들어보자. 그리고 API로 영화정보를 받아와서 배너와 슬라이드에 적용될 때 까지 로딩 스피너를 보여주도록 하자.

[코드캠프]13일차_TIL_React Slick 사용
레이아웃 구조잡기레이아웃 HIDDEN 영역 설정하기슬로벌 스타일 적용하기폰트레이아웃이란 프로젝트 전체의 UI 구조를 의미합니다.쉽게 말하면, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미합니다.app.tsx 작동원

[JavaScript] VanilaJS로 무한 캐러셀 슬라이드 만들기
캐러셀 슬라이드는 가로, 혹은 세로 축으로 회전하며 일련의 이미지를 보여주는 이미지 갤러리의 일종으로 특히 다양한 이미지들을 사용자에게 시각적으로 매력적으로 보여줄 필요가 있을 때 사용됩니다. 일반적으로 온라인 쇼핑몰 사이트에서 제품 이미지를 보여주는 메인 배너에 많이

3d-carousel
carousel은 다양한 종류가 있음플러그인을 사용하면 쉽게 구현할 수 있다. (owl-carousel, bootstrap-carousel, swiper-carousel 등)수업에서 배운 perspective 속성과 perserve-3d 속성을 응용하여 3d-carou

[Flutter] Custom Slider Widget 만들기(2)
Custom Slider Widget 만들기(2) 이번 글에서는 수평으로 하나의 사이즈가 큰 이미지를 백그라운드 배경으로 사용하면서 페이지 뷰 처럼 수평으로 슬라이딩 할 수 있는 위젯을 소개하려고 한다. 아래 공유한 결과물을 확인하면 이해가 될 것이다. 백프로 완

무한 캐러셀 만들어보기(with. react)
배너라고 불리는 캐러셀중, 요소를 계속해서 넘길수 있는 무한캐러셀을 만드는 방법에 대해서 알아봅니다.

[Flutter] Custom Slider Widget 만들기(1)
carousel_slider | Flutter Package이번 글에서는 Slider 위젯을 만들어 보려고 한다. 결과물이 궁금하신 분은 글 아랫 부분에 구현된 영상을 올려놨습니다. 기존 Flutter 기본 위젯으로 슬라이더가 가능한 스와이프 위젯을 만들 수 있다. P

[CSS] CSS 애니메이션으로 상하 무한 슬라이드 구현
외부 라이브러리를 사용하지 않고 상하로 움직이는 무한 슬라이드를 구현슬라이드가 진행하며 동일한 슬라이드가 한 화면에 위와 아래 동시에 보여지는 경우가 있으므로, 슬라이드를 2개씩 생성합니다.

react-slick으로 slick 구현하기 - feat.useRef 잘쓰기
react-slick을 이용해서 한페이지에 여러개의 carousel(slick) 구현하는 과정을 기록한 글입니다. 다소 부족한 점이 있으나 공부의 목적으로 작성하는 글이니 여러 배움을 주시는 피드백을 환영합니다!

10월 3주차 JavaScript 스터디 _ Carousel
현재 Tistory 정상화 문제가 있어, 아마 개발 블로그를 이전하게 될 것 같습니다. 이번 주에는 Carousel을 어떻게 구현할 수 있는지 배우고, 구현해보는 시간을 가졌습니다.
Next.js에서 Embla Carousel 라이브러리를 사용하여 Carousel Slider 만들기
Embla Carousel 라이브러리를 사용하여 다음과 같은 슬라이더를 만드는법을 공유해보려고한다.

javascript slick slider (캐러셀)
옵션의 prevArrow나 nextArrow는 클래스를 지정해서 버튼을 커스텀 할 수 있다.
react-slick arrow custom
이전에도 react-slick arrow custom을 했지만, 같은 방법으로 했는데 (여기에 기본 설치와 커스텀 방법이 있음) 한쪽(왼쪽) arrow가 이미지의 맨 아래로 들어가서 zIndex가 적용되지 않는 상황이 발생했다. 왜지?? 그래서 찾아헤멘 두번째 방법! react-slick arrow custom settings에 있는 arrow를 fa...