swiper 끝에가 짤릴때

sudyn·2023년 6월 12일

TIL

목록 보기
4/10

swiper의
spaceBetween={-24}
slidesPerView={1}
slidesOffsetAfter={-8}
slidesOffsetBefore={0}

      간격을 조정해주고 preview를 하나로설정한다.

계속 swiper가 넘어가지 않는현상 짤린채로
slidesPerView를 2개로 설정후 간격을 주니 계속 두번째 요소가 반만 보였었음

앞뒤 사이간격을 조정!

import React, { useState } from 'react';
import SelectedPartyItem from './SelectedPartyItem';
import { styled } from 'styled-components';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar } from 'swiper';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
export default function SelectedPartyList({ partyList }) {
  return (
    <>
      <ListWrapper>
        <Swiper
          modules={[Navigation, Pagination]}
          spaceBetween={-24}
          slidesPerView={1}
          slidesOffsetAfter={-8}
          slidesOffsetBefore={0}
        >
          {partyList?.map(party => (
            <SwiperSlide key={party.partyId}>
              <SelectedPartyItem key={party.partyId} party={party} /></SwiperSlide>
          ))}
        </Swiper>
      </ListWrapper>
    </>
  );
}
const ListWrapper = styled.ul`
  width: 360px;
  height: 170px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  bottom: 250px;
  z-index: 10;
`;
profile
개발계발하는 프론트엔드 개발자🍠

0개의 댓글