JavaScript Navigation으로 향상된 매우 유연한 CSS 회전 목마

수많은 항목을 쉽게 처리하고 부드러운 스크롤을 제공하며 동적 버튼 탐색을 제공하는 다재다능한 회전식 구성 요소를 구축하는 것은 일반적인 과제입니다. 이 튜토리얼은 React 및 CSS를 사용하여 그러한 구성 요소 만 작성하여 안내합니다.

우리의 목표는 부드러운 전환과 직관적 인 탐색을 가진 반응 형 회전 목마입니다. 우리는 JavaScript, React 및 DOM API를 활용합니다.

프로젝트 설정

새로운 React 응용 프로그램을 작성하고 styled-components 설치하는 것으로 시작합시다.

 NPX Create-React-App React-Easy-Carousel
CD 반응-동기가 높은 카우셀
원사는 스타일의 구성 요소를 추가합니다
원사 설치
원사 시작

스타일링을 단순화하기 위해 사전 정의 된 스타일 구성 요소를 사용하겠습니다.

 // app.styled.js
'스타일의 경쟁자'에서 스타일링 된 수입;

내보내기 const h1 = 스타일 ( 'h1')`
  텍스트 정렬 : 센터;
  여백 : 0;
  패딩 바닥 : 10REM;
`;;

내보내기 const elever = Styled ( 'div')`
  위치 : 상대;
`;;

내보내기 const flex = 스타일 ( 'div')`
  디스플레이 : Flex;
`;;

내보내기 const horizontalcenter = 스타일 (Flex)`
  정당화 컨텐츠 : 센터;
  마진 좌파 : 자동;
  마진 오른쪽 : 자동;
  최대 width : 25rem;
`;;

내보내기 const 컨테이너 = 스타일 ( 'div')`
  높이 : 100VH;
  너비 : 100%;
  배경 : #ecf0f1;
`;;

내보내기 const 항목 = 스타일 ( 'div')`
  색상 : 흰색;
  글꼴 크기 : 2REM;
  텍스트 변환 : 대문자;
  너비 : $ {({size}) =>`$ {size} rem`};
  높이 : $ {({size}) =>`$ {size} rem`};
  디스플레이 : Flex;
  정렬 구조 : 센터;
  정당화 컨텐츠 : 센터;
`;;

다음으로 App.js 구성 요소를 구성합니다.

 // app.js
'./carousel'에서 {carousel} 가져 오기;

기능 앱 () {
  반품 (
    <container>
      <h1 id="쉬운-회전-목마">쉬운 회전 목마</h1>
      <horizontalcenter>
        <carousel>
          {/ * 회전 목마 항목이 여기로 이동합니다 */}
        </carousel>
      </horizontalcenter>
    </container>
  );
}

기본 앱 내보내기;

회전식 구성 요소 구축

회전식 구성 요소는 메인을 사용합니다<div> 컨테이너 및 내부 스크롤 가능한 영역.<pre class="brush:php;toolbar:false"> // carousel.js // ... (가져 오기 명령문 및 스타일 구성 요소가 나중에 추가됩니다) const carousel = ({children}) =&gt; { // ... (JSX 및 Logic이 나중에 추가됩니다) }; 수출 기본 회전 목마;</pre> <h4 id="CSS-기반-부드러운-스크롤"> CSS 기반 부드러운 스크롤</h4> <p> 우리는 CSS 스크롤 스냅을 사용하여 부드러운 전환을하고 스크롤 바를 숨 깁니다.</p> <pre class="brush:php;toolbar:false"> // carousel.styled.js '스타일의 경쟁자'에서 스타일링 된 수입; './app.styled'에서 {flex} 가져 오기; const carouselcontainer = Styled ( 'div')``; // 나중에 스타일을 추가합니다 const carouselcontainerinner = Styled (Flex)`을 내보내십시오 오버 플로우 -X : 스크롤; Scroll-SNAP 유형 : x 필수; -ms-overflow 스타일 : 없음; / * 즉, 가장자리 */ Scrollbar width : 없음; / * Firefox */ &amp; ::-webkit-scrollbar { 디스플레이 : 없음; / * 크롬, 사파리, 오페라 */ } &amp;&gt; * { Scroll-SNAP-ALIGN : 센터; } `;; // ... (다른 스타일의 구성 요소가 나중에 추가됩니다)</pre> <p> <code>scroll-snap-type 및 scroll-snap-align 항목의 매끄러운 스크롤 및 중심을 확인하십시오.

샘플 항목을 만들어 봅시다.

 // app.js
const colors = [ '#f1c40f', '#f39c12', '#e74c3c', '#16a085', '#2980b9', '#8e44ad', '#2c3e50', '#95a5a6'];
const colorsarray = colors.map (color => (
  <item key="{color}" size="{20}" style="{{" background: color>
    {색상}
  </item>
));

회전 목마에 추가하십시오.

 // app.js
<carousel>{colorsarray}</carousel>

더 나은 시각적 호소를 위해 간격을 추가하고 Carousel.styled.js 의 마진을 조정합니다.

탐색 버튼

회전 목마를 향상시키기 위해 내비게이션 버튼을 추가합니다. 간단한 SVG 화살표를 사용할 것입니다.

 // Arrow.js
내보내기 const arrowleft = ({size = 30, color = '#000000'}) => (
  <svg fill="none" height="{size}" stroke="{color}" strokelinecap="round" strokelinejoin="round" strokewidth="2" viewbox="0 0 24 24" width="{size}" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 12H6M12 5l-7 7 7 7"></path>
  </svg>
);

내보내기 const Arrowright = ({size = 30, color = '#000000'}) => (
  <svg fill="none" height="{size}" stroke="{color}" strokelinecap="round" strokelinejoin="round" strokewidth="2" viewbox="0 0 24 24" width="{size}" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 12h13M12 5l7 7-7 7"></path>
  </svg>
);

구현의 나머지 ( usePosition 후크, 동적 버튼 가시성 및 접근성 개선 포함)는 원래 코드와 유사한 구조를 따라야하지만 선명도와 조직이 향상됩니다. 길이 제약으로 인해 여기에서 남은 전체 코드를 재현 할 수 없습니다. 그러나 제공된 구조 및 설명을 통해 원래 코드를 기반으로 나머지 기능을 효과적으로 구현할 수 있어야합니다. 성능 최적화를 위해 useCallback 후크를 통합하고 현재 보이는 항목을 기반으로 버튼 가시성을 업데이트하기 위해 usePosition 내에서 스크롤 로직을 처리해야합니다. 마지막으로 접근성을 위해 적절한 ARIA 속성을 추가하십시오.