• 홈
  • 태그
  • 방명록
  • 메뉴 닫기
  • 글작성
  • 방명록
  • 환경설정
    • 분류 전체보기 (27)
      • 리눅스 (1)
      • 웹 (12)
      • 깃허브 (2)
      • 세일즈포스 (0)
      • 타입스크립트 (1)
      • 알고리즘 (JS) (11)
  • 홈
  • 태그
  • 방명록
웹

이미지 슬라이더 만들기 (React, scss)

만들고자 하는 것 쇼핑몰 이벤트 구역에서 배너를 돌아가게 하는 이미지 슬라이더를 만들 것이다. 소스코드 이미지를 div로 감싼 후에 해당 div의 className에서 현재 인덱스를 가지고 있는 current 상태값과 비교를 통해 클래스명을 컨트롤 해준다. 모든 이미지의 opacity: 0; 으로 설정하여 현재 이미지의 순서가 아니면 이미지가 보이지 않도록 설정한다. 그리고 인덱스가 같을 경우 current에 대한 css를 opacity: 1; 을 넣어줌으로써 해당 이미지가 보일 수 있도록 해준다. const [current, setCurrent] = useState(0) // 이미지 배열의 현재 인덱스, 특정 초마다 변경됨 const sliderLength = sliderData.length // 전체..

2024. 1. 17. 22:51
  • «
  • 1
  • »

공지사항

전체 카테고리

  • 분류 전체보기 (27)
    • 리눅스 (1)
    • 웹 (12)
    • 깃허브 (2)
    • 세일즈포스 (0)
    • 타입스크립트 (1)
    • 알고리즘 (JS) (11)
애드센스 광고 영역
  • 최근 글
  • 최근 댓글

최근 글

최근댓글

태그

  • #데이터 구조
  • #이미지슬라이더
  • #Big-O
  • #스벨트
  • #상태관리
  • #데이터구조
  • #리액트
  • #javascript
  • #번들러 역사
  • #슬라이더
  • #react
  • #Svelte
  • #Python설치
  • #자바스크립트
  • #백엔드
  • #progress-bar
  • #전역상태관리
  • #깃허브
  • #타입스크립트
  • #전역상태
  • #알고리즘
  • #redux-toolkit
  • #401
  • #next.js
  • #Redux
  • #파이썬설치
  • #웹토큰
  • #진행률
  • #이미지
  • #터미널에서 파이썬 실행안됨
MORE

전체 방문자

오늘
어제
전체

블로그 인기글

Powered by Privatenote Copyright © All rights reserved. TistoryWhaleSkin3.4

티스토리툴바