개발 공부/Next.js2 Next, tailwind로 캐러셀 구현하기-2 (무한 루프 슬라이더, 최적화) 저번에 구현했던 캐러셀은 마지막 사진에서 맨 앞 사진으로 돌아올 때 애니메이션이 어색하다는 단점이 있었다. 무한 루프 슬라이더를 구현해보자. 어떻게 구현하면 좋을까?이미지 배열의 맨 앞과 끝에 가장 마지막 이미지와 제일 첫 이미지를 붙이고, 끝 이미지 일 경우 속도를 0으로 바꿔서 이동시킨다."use client";import { useState, useEffect } from "react";import Image from "next/image";const images = [ { src: "/image/sample/1.jpg" }, { src: "/image/sample/2.jpg" }, { src: "/image/sample/3.jpg" }, { src: "/image/sample/4.jpg.. 2024. 11. 26. Next, tailwind로 Carousel 구현하기 - 1 (자동 슬라이드) 메인 페이지에 슬라이드 배너 (캐로셀)을 react-slick이라는 라이브러리를 이용해 구현했었는데,1. 디자인 커스텀이 어렵고2. 라이브러리를 많이 설치하면 성능 상 좋지 않을 것 같아 직접 구현해보기로 했다. 기본 원리구현하는 것은 어렵지 않은데,슬라이더에 넣고 싶은 이미지를 flex를 이용해 가로로 길게 붙이고useEffect로 처음 렌더링 되었을 때 setInterval을 실행시켜, 5초마다 옆으로 이동시켜준다이동 버튼을 누를 경우, 옆으로 이동시켜준다.개인적으로 배너 위에 마우스를 올렸을 때 좌우 이동 버튼이 나타나는게 예쁜 것 같아서 버튼 hover도 같이 구현했다. 영상에는 무한 루프 슬라이더가 구현되어있는데, 이번 게시글 코드에는 구현되지 않고 다음 게시글에서 마저 구현할 예정이다.전체 코.. 2024. 9. 10. 이전 1 다음
