제이쿼리 슬라이더 위치변경 / 초기화 상태에서 만들기

 

 

스와이퍼에서  Add Swiper HTML Layout html 복붙

https://swiperjs.com/get-started

 

      <div class="container">
        <section class="main_new_product">
          <div class="main_tit">
          <h2>지금 신상</h2>
          <p>지금 바로 입고된<br>따끈따끈한 신상품 과자</p>
          <a class="btn_more" href="#">이번 주 핫 신상 보러가기</a>
        </div>
        <!-- 섹션유닉클래스 사용하면 슬라이더에 유닉클래스 필요없음 -->
        <div class="swiper-container new_slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
          </div>
          <div class="swiper-scrollbar"></div>
        </div>
        </secti

swiper-container 이름 가져와서 그대로 사용 

<section class="main_new_product"> 

상단에 이름이 있기 때문에 안에는 생략

 

---

 

초기화 코드 복붙 

$(function () {
  // 신상슬라이더
  const newSwiper = new Swiper('.main_new_product .swiper-container', {
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
});

 

이름지정후 스크롤 바만 필요하기 때문에 나머지 삭제 

 

---

---

calc 로 가운데 정렬

 

margin-left: 50% ; 시작위치 변경 확인

---

  margin-left: calc( 50% - 313px);

 

안쪽으로 313 더가기 

 

 

 

메인제목과 슬라이더는 다른 구조여서 나뉘어져 있다. 

 

이때 겹쳐서 한줄로 만들어주기위해 position을 준다 

 

---

포지션 적용 부분

 

 

  /* 가운데기준으로 - (그리드크기/2) */

.main_new_product .main_tit {

  position: absolute;

  left: calc( 50% - 640px );

  top: 0;

}

---

슬라이더 갯수 지정

 

slidesPerView: 'auto',  : 슬라이더 갯수를 자동으로 보여주게 한다.

 

스크롤바 위치조정

 

 

 

오버 플로우 히든이 자동으로 걸려있그 때문에 

padding 적용시 가려져서 안보임.

bottom으로 늘려준다.

 

 

 

 

 

높이잡기

 

 

 

html 이미지 적용

 

스크롤바 조정할떄 문제점

 

 

오버플로우히든이걸려있어 슬라이드에 가려짐

.main_new_product .slider_wrap {
  position: relative;
}
/* margin, padding %는 부모의 가로가 기준 */
.main_new_product .swiper-container {
  margin-left: calc( 50% - 313px);
  padding-bottom: 80px;
  position: static;
  /* 포지션 초기화 */
}

 

 

컨테이너가 100프로구조에서 스크롤바가  자동조정됨

 

왜? 스크롤바가 스와이퍼 컨테이너에 같이 묶여있으므로 안에서 같이 조정됨

때문에 구조 변경 필요

 

 

 

스크롤바를 inner로 감아

컨테이너 밖으로 빼준다.

 

 

 

---

스크롤바 구조 위치가 변경되었기 때문에, 자바 스크립으에서 부모의 위치를 같이 지정해준다.

(미 지정시 스크롤바가 여러개일경우 꼬일 수 있음)

$(function () {
  // 신상슬라이더
  const newSwiper = new Swiper('.main_new_product .swiper-container', {
    slidesPerView: 'auto',
    spaceBetween: 30,
    scrollbar: {
      el: '.main_new_product .swiper-scrollbar',
      // 스크롤바위치를 html에서 밖으로 빼주고 부모의 위치를 같이 넣어서 찾을수 있게한다
    },
  });
});

 

 

---

스크롤바 위치 조정

 

 

 

 

 

트렌디션이 이미 적용되어있으므로  사용불가

마진탑 적용시 마진병합으로 안됨

포지션 릴레이티브 이미 적용되어있음

때문에 top 조정 가능

 

 

 

 

---

swiper-scrollbar 위치변경 정리

- swiper-scrollbar를 슬라이더 좌측으로 뺄 경우 - swiper-container 아래로 다로 빼주고 - 스와이퍼 초기화 코드에서 부모이름을 적어야함     scrollbar: {       el: '.main_new_product .swiper-scrollbar',     }, - css에서 swiper-scrollbar의 높이를 따로 잡아야함 swiper-scrollbar-drag 위아래 위치 조정시 top 사용 (margin-top은 마진병합, translate 은 swiper사용하므로 안됨)

---

문제점 발견 슬라이더바가 끝까지 가지않음 

슬라이더의 시작과 끝이 정해져야한다. 

 

슬라이더바가 끝까지 가도&nbsp; 슬라이더가 다 보이지 않는다 ㅠㅠ

 

 

 

 

.main_new_product .swiper-container {

  margin-left: calc( 50% - 313px);

  padding-bottom: 80px;

  /* 슬라이드 오른쪽이 안으로 들어오게 */

  width: 953px;

  /* 오퍼플로우 초기화 */

  overflow: visible;

}

 

 

  슬라이드 영역지정 후 바깥쪽을 보이게
- .main_new_product .swiper-container 가로길이 지정
- 슬라이더의 overflow:visible로 넘친 슬라이드 보이게
- 슬라이더 좌측은 :before 로 커버씌워 가려줌