# Carousel

62개의 포스트
post-thumbnail

[JS] 자바스크립트로 캐러셀(Carousel)구조 구현하기

자바스크립트로 만들어본 캐러셀 구조!

2023년 5월 20일
·
0개의 댓글
·
post-thumbnail

[넷플릭스 클론코딩] 슬라이드, 로딩 스피너 만들기

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

2023년 4월 4일
·
0개의 댓글
·
post-thumbnail

[코드캠프]13일차_TIL_React Slick 사용

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

2023년 3월 29일
·
0개의 댓글
·
post-thumbnail

[JavaScript] VanilaJS로 무한 캐러셀 슬라이드 만들기

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

2023년 3월 27일
·
0개의 댓글
·
post-thumbnail

[CSS] - 아마존 클론#3 (캐러셀)

아마존 웹사이트를 클론 하면서 학습한 CSS 내용을 정리해보자. (캐러셀)

2023년 3월 26일
·
0개의 댓글
·
post-thumbnail

3d-carousel

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

2023년 3월 24일
·
0개의 댓글
·
post-thumbnail

[Flutter] Custom Slider Widget 만들기(2)

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

2023년 3월 6일
·
0개의 댓글
·
post-thumbnail

무한 캐러셀 만들어보기(with. react)

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

2023년 3월 3일
·
0개의 댓글
·
post-thumbnail

[Flutter] Custom Slider Widget 만들기(1)

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

2023년 3월 2일
·
0개의 댓글
·
post-thumbnail

[CSS] CSS 애니메이션으로 상하 무한 슬라이드 구현

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

2023년 2월 19일
·
0개의 댓글
·
post-thumbnail

react-slick으로 slick 구현하기 - feat.useRef 잘쓰기

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

2023년 1월 9일
·
0개의 댓글
·
post-thumbnail

[React] 라이브러리 쓰지 않고 캐러셀 구현하기

커스텀 훅을 적용한 캐러셀 구현

2022년 12월 31일
·
0개의 댓글
·
post-thumbnail

React Carousel 만들기 (1)

React Carousel Scratch

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

10월 3주차 JavaScript 스터디 _ Carousel

현재 Tistory 정상화 문제가 있어, 아마 개발 블로그를 이전하게 될 것 같습니다. 이번 주에는 Carousel을 어떻게 구현할 수 있는지 배우고, 구현해보는 시간을 가졌습니다.

2022년 10월 18일
·
0개의 댓글
·
post-thumbnail

React Carousel 이용한 Carousel 만들기

리액트 라이브러리를 이용해 Carousel 만들기

2022년 10월 7일
·
0개의 댓글
·
post-thumbnail

Drag Carousel 뽀개기

라이브러리 없이 React에서 터치로 캐러셀을 만들어 보자!!!

2022년 10월 7일
·
2개의 댓글
·

Next.js에서 Embla Carousel 라이브러리를 사용하여 Carousel Slider 만들기

Embla Carousel 라이브러리를 사용하여 다음과 같은 슬라이더를 만드는법을 공유해보려고한다.

2022년 10월 4일
·
0개의 댓글
·

image carousel 구현

valliaJS로 image-carousel 구현하는 방법에 대한 포스트

2022년 10월 4일
·
0개의 댓글
·
post-thumbnail

javascript slick slider (캐러셀)

옵션의 prevArrow나 nextArrow는 클래스를 지정해서 버튼을 커스텀 할 수 있다.

2022년 8월 29일
·
0개의 댓글
·

react-slick arrow custom

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

2022년 8월 28일
·
0개의 댓글
·