제이쿼리 swiper 슬라이더 정렬 overflow

슬라이더 이미지를 포지션으로 정렬공식으로 띄워 가운데 배치하자 

.main_slider_wrap .swiper-slide a {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

 

 

그럼 부모의 높이가 사라지기 때문에 창에서 보이지 않는다. 

 

 

포지션 적용시 부모의 높이가 다 날라가서 보이지 않음

 

 

---

높이를 잡아 보자

.main_slider_wrap .main_slider {
  height: 440px;
  border: 3px solid red;
}

 

 

 

 

 

높이적용시 이미지가 넘쳐 흐름

오버플로우 히든으로 적용 해 주어야한다. 

 

---

 

swiper 가져올때 css 기존코드에 이미 

 position: relative; 가 적용되어있음을 확인

 

.main_slider_wrap .swiper-slide {
  overflow: hidden;
}

그럼 우리코드엔 overflow: hidden 만 적용시 제대로 나온다