[React Swiper] loop={true} 마지막 페이지 먼저보이는 에러

2023. 4. 13. 22:22·Frontend/React

loop : 자동 순환되게 설정을 했는데 처음 페이지 진입하면 마지막 페이지 부터 보여줌

구글 검색해 봤는데... 약간 Swiper 에러 같음

가뜩이나 pagination을 fraction타입으로 설정해놔서 3/3 -> 1/3 이런식으로 작동한다.

 

<Swiper
	modules={[Pagination, A11y, Controller, Navigation, Autoplay]}
	pagination={{ type: 'fraction' }}
	loop={true}
	navigation={true}
	initialSlide={1} // 이거 선언해주면 된다
>

 

initialSlide={1} 이라고 선언하니까 정상작동함

 

api 문서 설명에는 Index number of initial slide. 이렇게 작성되어있어서 0이라고 작성했는데 작동을 안함

알고보니 마지막 페이지가 swiper-duplicate? 라고 class가 주어져있고 젤 상단에 있어서 그랬던 것이였음

 

그래서 그 바로 뒤 index인 1을 주니까 1페이지부터 잘보여줬다.

반응형

'Frontend > React' 카테고리의 다른 글

[React Chart] 리액트 chartjs legend custom 하기  (1) 2023.04.24
[React Chart] 리액트 chart.js tooltip custom 하기  (1) 2023.04.24
[React Swiper] import css 안될 때  (1) 2023.04.13
[React Swiper] play, stop 버튼 만들기  (1) 2023.04.13
[React Swiper] 리액트에서 스와이퍼 사용하기  (0) 2023.04.13
'Frontend/React' 카테고리의 다른 글
  • [React Chart] 리액트 chartjs legend custom 하기
  • [React Chart] 리액트 chart.js tooltip custom 하기
  • [React Swiper] import css 안될 때
  • [React Swiper] play, stop 버튼 만들기
전예방
전예방
  • 전예방
    예방이의 개발일기
    전예방
  • 전체
    오늘
    어제
    • All (125)
      • Info & Tip (2)
      • 유용한 사이트들 (5)
      • Mark Up & StyleSheet (23)
        • HTML (6)
        • CSS & SCSS (10)
        • 반응형 (6)
      • Frontend (66)
        • 전체 (10)
        • JavaScript & Jquery (18)
        • TypeScript (0)
        • React (26)
        • Next.js (3)
        • 성능최적화 (2)
        • 웹접근성 (2)
      • Backend (13)
        • Python (1)
        • JAVA (2)
        • node.js (0)
        • PHP (7)
        • 패키지매니저 (3)
      • Markdown (0)
      • SCM (1)
        • Git&Github (1)
        • SVN (0)
      • IDE (4)
        • VSCode (2)
        • IntelliJ (1)
        • Ecplise (1)
      • 취미생활 (3)
      • 정보처리기사 (2)
      • 코딩자율학습단 (5)
        • 12기 (파이썬) (5)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

    • velog
    • github
  • 공지사항

  • 인기 글

  • 태그

    Chart.js
    회원가입
    관리자 페이지
    CSS
    Admin
    react
    frontend
    Python
    yarn berry
    코딩자율학습단
    TypeScript
    코딩자율학습
    php
    나도코딩
    NPM
    리액트
    파이썬
    swiper.js
    React Swiper
    반응형
  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.3
전예방
[React Swiper] loop={true} 마지막 페이지 먼저보이는 에러
상단으로

티스토리툴바