[Bug] 이미지 swiper 너비 계산 문제

어떤 버그가 발생했나요? 🧐

이미지 swiper의 너비 계산 문제 siwper 라이브러리가 자동으로 스와이퍼 아이템들을 shrink 값으로 너비를 계산하기 때문에 문제가 발생한듯하다..^.ㅠ

발생 조건 ⚙️

// Given-When-Then으로 작성해주세요

예측 결과값 🔍

import React, { useEffect } from 'react';
import Header from './Header';
import './Carousel.css'; // 필요한 스타일 정의
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Swiper, SwiperSlide } from 'swiper/react';

const data = [
  {
    id: 1,
    title: 'The IONIQ 5',
    subTitle: '새롭게 돌아온 The new IONIQ 5를 소개합니다.',
    backgroundImgUrl: '/CarSection.png',
  },
  {
    id: 2,
    title: 'Interior 2',
    subTitle: '내부 인테리어',
    backgroundImgUrl: '/bg1.svg',
  },
  {
    id: 3,
    title: 'Performance 3',
    subTitle: '성능',
    backgroundImgUrl: '/bg2.svg',
  },
  {
    id: 4,
    title: 'Interior 4',
    subTitle: '내부 인테리어',
    backgroundImgUrl: '/bg1.svg',
  },
  {
    id: 5,
    title: 'Performance 5',
    subTitle: '성능',
    backgroundImgUrl: '/bg2.svg',
  },
];

const SwiperContainer = () => {
  const updateSlideBackgrounds = () => {
    const slides = document.querySelectorAll('.swiper-slide');
    slides.forEach((slide) => {
      const imgDiv = slide.querySelector('.swiper-img') as HTMLElement;
      if (slide.classList.contains('swiper-slide-active')) {
        imgDiv.style.backgroundImage = `url(${imgDiv.getAttribute('data-bg-url')})`;
      } else {
        imgDiv.style.backgroundImage = 'none';
      }
    });
  };

  useEffect(() => {
    updateSlideBackgrounds();

    // SwiperSlide가 변경될 때마다 배경 이미지를 업데이트
    const observer = new MutationObserver(updateSlideBackgrounds);
    const slides = document.querySelectorAll('.swiper-slide');
    slides.forEach((slide) => {
      observer.observe(slide, { attributes: true, attributeFilter: ['class'] });
    });

    return () => observer.disconnect();
  }, []);

  return (
    <div>
      <Swiper
        effect={'coverflow'}
        grabCursor={true}
        centeredSlides={true}
        slidesPerView={5}
        coverflowEffect={{
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 2.5,
        }}
        updateOnWindowResize
        pagination={{ el: '.swiper-pagination', clickable: true }}
        navigation={true}
        onSlideChange={updateSlideBackgrounds}
      >
        {data.map((item) => (
          <SwiperSlide key={item.id}>
            <div className='swiper-slide-content'>
              <div
                data-bg-url={item.backgroundImgUrl}
                className='swiper-img bg-gray-300'
              />
              <Header title={item.title} subTitle={item.subTitle} />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default SwiperContainer;

/* .carousel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.carousel {
  display: flex;
  gap: 4px;
  transition: transform 0.5s ease;
}

.carousel-item {
  width: 84px;
  height: 350px;
  background-color: green;
  cursor: pointer;
  transition:
    transform 0.5s ease,
    width 0.5s ease,
    height 0.5s ease;
}

.carousel-item img {
  width: 100%;
  height: 100%;
}

.carousel-item.active {
  transform: scale(1.2);
  z-index: 1;
}

.carousel-item.left {
  transform: rotate(-15deg);
}

.carousel-item.right {
  transform: rotate(15deg);
}

.carousel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-main-img {
  width: 1184px;
  height: 500px;
  margin-top: 20px;
}

.carousel-container {
  width: 100%;
  max-width: 1184px;
  margin: auto;
  padding: 20px;
} */

.swiper {
  width: 1184px;
  display: flex;
  justify-content: center;
}
/* .swiper-wrapper {
  gap: 4rem;
} */
.swiper_container {
  width: 1184px;
  height: 52rem;
  padding: 2rem 0;
  position: relative;
  gap: 4rem;
}

.swiper-slide {
  display: flex;
  gap: 4rem !important;
  justify-content: center;
  flex-shrink: 1 !important;
}
.swiper-img {
  width: 84px;
  height: 350px !important;
  background-color: gray; /* 기본 배경 색상 */
  background-size: cover;
  background-position: center;
}
#root
  > div
  > main
  > div.min-h-screen.min-w-screen.relative
  > div:nth-child(2)
  > div
  > div.swiper-wrapper
  > div.swiper-slide.swiper-slide-active {
  width: 784px !important;
}

#root
  > div
  > main
  > div.min-h-screen.min-w-screen.relative
  > div:nth-child(4)
  > div
  > div.swiper-wrapper
  > div.swiper-slide.swiper-slide-active {
  width: 784px !important;
}
.swiper-slide .swiper-slide-active {
  width: 500px !important;
}
.swiper-slide .swiper-slide-active .swiper-slide-content {
  width: 500px !important;
}
.swiper-slide-content {
  display: flex;
  justify-content: center;
}

.swiper-slide-active .swiper-img {
  width: 784px !important;
  height: 422px !important;
  background-image: var(--bg-image); /* 활성 슬라이드에만 배경 이미지 적용 */
}

.swiper-slide-prev .swiper-img,
.swiper-slide-next .swiper-img {
  background-image: none;
}

.swiper-slide-active .swiper-img[data-bg-url] {
  background-image: attr(
    data-bg-url url
  ); /* 활성 슬라이드에만 배경 이미지 적용 */
}

.swiper-slide .swiper-img {
  //width: 37rem;
  height: 42rem;
  border-radius: 2rem;
  object-fit: cover;
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

.slider-controler {
  position: relative;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-controler .swiper-button-next {
  left: 58% !important;
  transform: translateX(-58%) !important;
}

@media (max-width: 990px) {
  .slider-controler .swiper-button-next {
    left: 70% !important;
    transform: translateX(-70%) !important;
  }
}

@media (max-width: 450px) {
  .slider-controler .swiper-button-next {
    left: 80% !important;
    transform: translateX(-80%) !important;
  }
}

@media (max-width: 990px) {
  .slider-controler .swiper-button-prev {
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

@media (max-width: 450px) {
  .slider-controler .swiper-button-prev {
    left: 20% !important;
    transform: translateX(-20%) !important;
  }
}

.slider-controler .slider-arrow {
  background: var(--white);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  left: 42%;
  transform: translateX(-42%);
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.slider-controler .slider-arrow ion-icon {
  font-size: 2rem;
  color: #222224;
}

.slider-controler .slider-arrow::after {
  content: '';
}

.swiper-pagination {
  position: relative;
  width: 15rem !important;
  bottom: 1rem;
}

.swiper-pagination .swiper-pagination-bullet {
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary);
}

softeerbootcamp4th / Team2-TiramisuCake-FE

[Bug] 이미지 swiper 너비 계산 문제 #22

어떤 버그가 발생했나요? 🧐

발생 조건 ⚙️

예측 결과값 🔍