# Carousel

34개의 포스트
post-thumbnail

Carousel 구현하기

Carousel은 슬라이드 쇼와 같은 형식을 가지며, 스크롤을 내리지 않고도 유저에게 다양한 정보를 제공할 때 사용한다.

2022년 5월 17일
·
0개의 댓글

carousel 2탄

어제 무한 carousel을 구현하기 위해 많은 시간을 보냈다. 1번에서 2번으로 넘어갈 때 끊겨서 나오는 문제가 있었다.당시에는 새벽이라 머리가 멈춰있었던 것 같다.일단 구현한 원리를 잘 생각해보았다. 기존의 데이터 처음이나 마지막 인덱스에 접근했을 때 미리 설정했던

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

carousel 만들기

프로젝트를 진행하면서 캐러셀을 만들 일이 생겼다. 수 많은 리액트 라이브러리가 있지만, 공부를 하고 한 번도 만들어 본적 없는 것을 라이브러리로 만드는게 내키지 않았다.그래서 순수하게 나만의 carousel을 만들기로 했다. 사실 캐러셀은 기본 구조만 알면 만드는 일은

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

onboarding만들기 (carousel)

개인노션 작성 글(2022.03.08) 블로그로 이전 중입니다.디자이너분이 최초 접속자에게 보여줄 온보딩을 만들어달라는 요청이 있어 만들어 보려고 합니다사진과 같은 온보딩을 원하셔서 기존에 사용하던 carousel라이브러리랑은 형식이 틀려서 직접 만들어보려고 합니다.정

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

13) 맨날 Body, Wrapper 설정 복붙하는거 아니지..? Layout 구조의 편리함! 코캠은 알고리즘 테스트도 매주 본대요~(ft. global styles) Code-Camp FE 6기

오늘의 일정 good morning study안뇽 오늘은 한문제인데 못풀어써 근데 이따가 알테보고 좀 더 볼꺼야 ! 그래서 아직 답 안봤지롱 마지막 조건에서 뭐가 문제일까 ..흑레이아웃 구조잡기글로벌 스타일 적용캐러셀 이미지Code ReviewAlgorithm Clas

2022년 3월 30일
·
0개의 댓글

React | Carousel 구현

<Carousel> 컴포넌트 구현, navigation 버튼(prev, next), pagination bar, 구현 중 발생한 문제와 해결한 방법

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

div 안의 이미지 속성

css - 이미지 속성

2022년 1월 26일
·
0개의 댓글

Day 13.

Layout, Global Style, 캐러셀

2022년 1월 26일
·
0개의 댓글
post-thumbnail

CRA에서 Swiper 사용하기

CRA에서 Swiper 라이브러리를 사용하는 방법을 포스팅했습니다.

2021년 12월 28일
·
0개의 댓글
post-thumbnail

[react] 캐러셀(Carousel) 만들기.

인터넷에서 얻어낸 캐러셀 만드는 법은 한번에 한 이미지씩 넘어가도록 구현하는 방법만 있는거같길래 그 내용들을 참고해서 넷플릭스의 캐러셀처럼 여러 컨텐츠를 한번에 넘기도록 구현했다.useState를 이용해서 버튼 누를때마다 10씩 더하거나 빼도록 하였고,useRef를 이

2021년 12월 15일
·
0개의 댓글

React Slider/Carousel 구현.

리액트로 구현하는 위에서 아래로 움직이는 무한 슬라이더!

2021년 11월 26일
·
0개의 댓글
post-thumbnail

SHOE-KREAM 메인페이지

메인부분의 케러셀 부분은 1차와 달리 라이브러리 사용이 가능했기에, slick 라이브러리를 통해서 쉽게 구현할 수 있었다. slick 라이브러리를 구현할때 주의해야할 점은 css 부분인데, 처음 slick 라이브러리를 갖다 붙였을땐 화살표가 안보일 수도 있고, 밑에 .

2021년 10월 31일
·
0개의 댓글
post-thumbnail

[팀프로젝트] 리디북스 clone - 메인페이지(1)

슬라이더 라이브러리 Slick carousel 사용class형 component 말고, function형 component 쓰기styled.component 사용slick carousel library컴포넌트 재사용조건부렌더링에 따라 할인,대여 패치 구분MainLayo

2021년 10월 24일
·
0개의 댓글
post-thumbnail

[Mini Web Project] Carousel (feat.목화)

페이지 로딩 시, 첫 번째 이미지 화면에 보이기좌측, 우측 화살표 두개 보이기화면 아래 쪽에 slide-bar 보이기좌측 화살표 클릭시 이전 이미지 보여주기우측 화살표 클릭시 다음 이미지 보여주기마지막 이미지에서 우측 화살표 누를 경우, 1번째 이미지 보여주기1번째 이

2021년 10월 12일
·
0개의 댓글
post-thumbnail

Carousel 기능 구현

웹사이트에서 흔히 볼 수 있는, 왼쪽과 오른쪽에 화살표가 있고 클릭을 할 때마다 옆의 이미지로 넘어가는 흔히들 이미지 슬라이드라고 하는 기능의 정식명칭은 Carousel이라고 한다.react에서 이런 캐러샐 기능을 구현하는 방법을 찾아봤을 때 가장 많이 나오는건 바로

2021년 8월 8일
·
0개의 댓글

[react-native] Carousel 만들기

이번에 맡은 일 중에 아래와 같은 carousel을 만들어야 했다.사실 캐러셀은 처음 react를 접했을때나 지금이나 수 많은 라이브러리들이 존재하는데,요즘 따라 react-native를 하면서 라이브러리들을 찾아보면 단지 RN 기본 API에 스타일 조금 입히고함수 몇

2021년 8월 5일
·
1개의 댓글
post-thumbnail

[CSS] scroll-snap으로 부드러운 스크롤 표현하기

CSS 단 두 줄로, Carousel을 만들 수 있다. scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성이다. 이를 통해 스와이프 하거나, 스크롤 할 때 캐러셀처럼 자연스러운 효과를 낼 수 있다.

2021년 8월 1일
·
0개의 댓글
post-thumbnail

[에러노트] 캐로쉘 라이브러리 CSS 수정

이번 실전 프로젝트에서 슬라이드 뷰를 제작하게 되었고 우리 팀은 캐로쉘이라는 라이브러리를 사용하기로 했다. 그런데 생각지도 못했던 난관에 부딪히고 말았다ㅠ😖 문제가 생긴 & 수정하기 전 화면가운데로 와야할 이미지가 보이는 것처럼 왼쪽으로 자꾸 치우쳐서 문제였다. 내가

2021년 8월 1일
·
0개의 댓글
post-thumbnail

[React] useState, useEffect, useRef을 이용하여 캐러셀 슬라이더 구현하기

React의 useState, useEffect, useRef을 이용하여 캐러셀 슬라이더를 만들어 보겠습니다. create-react-app을 통해 리액트 프로젝트를 만들어 줍니다. 스타일링은 styled-components를 사용하겠습니다.

2021년 7월 17일
·
0개의 댓글
post-thumbnail

[3분 TIPS] React-Slick 쉽게 사용하기

React-slick, 쉽지만 더 쉽게 사용하기 😄

2021년 7월 16일
·
2개의 댓글