심폐소생술 부탁드립니다 swiper.js

[이창민]

안녕하세요 쎈세 살려주세요

react에서 swiper js를 사용중인데 문제가 발생했습니다
새로고침시 초기에 swiperslide가 겹쳐서 정렬이 됩니다.
브라우저 창을 줄였다가 늘리면 정상이되긴하는데 이건 캐시때문에 그런건가요?

밑에 소스코드 첨부드립니다.

이게 정산인데 자꾸



이렇게 나오네요 쎈세 진짜 8시간동안 해결방법을 찾아보면서 이것저것 대입해봤는데 모르겠어요 ㅠㅠ



사실 모바일에서만 swiper기능을쓰고싶은거입니다 이렇게요
768px이상에서는 스와이프 기능을 아예 끄는게 best입니다.

plan.js
import "./../Plan/Plan.css";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Pagination } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import React, { useState, useEffect } from "react";

SwiperCore.use([Navigation, Pagination]);

function Plan({ setPlanName }) {
  // setPlanName을 props로 전달받음
  const handlePlanButtonClick = (planName) => {
    setPlanName(planName); // App.js에서 전달받은 setPlanName 함수 납치
  };

  const [isWide, setIsWide] = useState(false);
  useEffect(() => {
    setIsWide(window.innerWidth >= 768);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const handleResize = () => {
    setIsWide(window.innerWidth >= 768);
  };

  return (
    <div className="plan-background">
      <div className="plan-container">
        <p className="plan-title">쌸라쌸라</p>
        <p className="plan-paragraphs">
          불라불라</b>
        </p>
        <div className="plan-img-container">
          <Swiper
            className="Swiper"
            spaceBetween={20}
            slidesPerView={isWide ? 3 : 1}
            scrollbar={{ draggable: true }}
            navigation
            pagination={{ clickable: true }}
            breakpoints={{
              767: {
                width: 360,
                slidesPerView: 1,
              },
            }}
          >
            <SwiperSlide className="SwiperSlide">1 </SwiperSlide>

            <SwiperSlide className="SwiperSlide">2</SwiperSlide>

            <SwiperSlide className="SwiperSlide">3</SwiperSlide>
          </Swiper>
        </div>
      </div>
    </div>
  );
}

export { Plan };


-------------------------
plan.css

.Adv-container {
  width: 1440px;
  height: 1088px;
  margin: auto;
  text-align: center;
  padding-top: 80px;
}

.adv-title {
  font-family: "Spartan";
  font-style: normal;
  font-weight: 900;
  font-size: 20px;
  line-height: 100%;
  text-transform: uppercase;
  color: #00d2b7;
}

.adv-paragraphs {
  margin-top: 16px;
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 150%;
  text-align: center;
  color: #1c1c1e;
}

.img-container {
  display: flex;
  justify-content: center;
  width: 1120px;
  height: 672px;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
}

.waste-worry {
  width: 550px;
  height: 672px;
}

.waste {
  display: inline-block;
  width: 550px;
  height: 324px;
  text-align: left;
  background: #4f64d7;
  border-radius: 16px;
  background-image: url(./../../img/sec01_img.webp);
}

.waste-contents {
  width: 280px;
  height: 170px;
  margin-top: 40px;
  margin-left: 32px;
  color: #ffffff;
}

.waste-contents h1 {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 29px;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.waste-contents p {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-size: 24px;
  line-height: 35px;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.worry {
  display: inline-block;
  width: 550px;
  height: 324px;
  text-align: left;
  margin-top: 24px;
  background: #ffd700;
  border-radius: 16px;
  background-image: url(./../../img/sec02_img.webp);
}

.worry-contents {
  width: 280px;
  height: 170px;
  margin-top: 40px;
  margin-left: 32px;
  color: #1c1c1e;
}

.worry-contents p {
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-size: 24px;
  line-height: 35px;
  letter-spacing: -0.5px;
  color: #1c1c1e;
}

.find {
  display: inline-block;
  width: 550px;
  height: 672px;
  text-align: left;
  margin-left: 20px;
  background: #00d2b7;
  border-radius: 16px;
  background-image: url(./../../img/sec03_img.webp);
}

.find-contents {
  margin-top: 40px;
  margin-left: 32px;
  font-family: "Spoqa Han Sans Neo";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: -0.5px;
  color: #171717;
}

span {
  font-weight: bold;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .Adv-container {
    width: 320px;
    height: 744px;
    margin: auto;
    text-align: center;
    padding-top: 40px;
  }

  .adv-title {
    font-family: "Spartan";
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    color: #00d2b7;
  }

  .adv-paragraphs {
    margin-top: 16px;
    font-family: "Spoqa Han Sans Neo";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: #1c1c1e;
  }
  .adv-paragraphs b {
    display: block;
    content: "";
    margin: 0.5em;
  }

  .img-container {
    display: block;
    justify-content: center;
    width: 320px;
    height: 526px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }

  .waste-worry {
    width: 320px;
    height: 348px;
  }

  .waste {
    display: inline-block;
    width: 320px;
    height: 170px;
    text-align: left;
    background: #4f64d7;
    border-radius: 8px;
    background-image: url(./../../img/mobile/img_m_sec01.webp);
  }

  .waste-contents {
    width: 155px;
    height: 93px;
    margin-top: 20px;
    margin-left: 20px;
    color: #ffffff;
  }

  .waste-contents h1 {
    font-family: "Spoqa Han Sans Neo";
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -0.5px;
    color: #ffffff;
  }

  .waste-contents p {
    font-family: "Spoqa Han Sans Neo";
    font-style: normal;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.5px;
    color: #ffffff;
  }

  .worry {
    display: inline-block;
    width: 320px;
    height: 170px;
    text-align: left;
    margin-top: 24px;
    background: #ffd700;
    border-radius: 8px;
    background-image: url(./../../img/mobile/img_m_sec02.webp);
  }

  .worry-contents {
    width: 151px;
    height: 93px;
    margin-top: 20px;
    margin-left: 20px;
    color: #1c1c1e;
  }

  .worry-contents h1 {
    font-family: "Spoqa Han Sans Neo";
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -0.5px;
    color: #171717;
  }

  .worry-contents p {
    font-family: "Spoqa Han Sans Neo";
    font-style: normal;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.5px;
    color: #1c1c1e;
  }

  .find {
    display: inline-block;
    width: 320px;
    height: 170px;
    margin-left: 0;
    /* 정확한 마진값 적용해야됨 */
    margin-top: 40px;
    text-align: left;
    background: #00d2b7;
    border-radius: 8px;
    background-image: url(./../../img/mobile/img_m_sec03.webp);
  }

  .find-contents {
    width: 151px;
    height: 93px;
    margin-top: 20px;
    margin-left: 20px;
    color: #1c1c1e;
  }

  .find-contents h1 {
    font-family: "Spoqa Han Sans Neo";
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -0.5px;
    color: #171717;
  }

  .find-contents p {
    font-family: "Spoqa Han Sans Neo";
    font-style: normal;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.5px;
    color: #1c1c1e;
  }

  span {
    font-weight: bold;
    text-decoration: underline;
  }
}

[codingapple]

페이지접속시 resize 이벤트리스너 실행이 안되나봅니다 
isWide대신 현재 폭같은걸 구해서 넣어보거나 
isWide 기본값으로 현재폭 집어넣읍시다

[글쓴이]

글