2021-07-17 Part(1)_ch(10)_(17~20) Swiper(슬라이드,pagination,navigation)

[swiper 구조]
<div>swiper-container</div>
  <div>swiper-wrapper</div>
    <div>swiper-slide</div>

[swiper 슬라이드 움직이도록 JS작성]
//new Swiper("선택자",{옵션});
new Swiper(".notice-line .swiper-container",{
direction:'vertical' //수직 ( 안적을시 기본수평)
autoplay:true //자동 재생 (autoplay:{delay: 3000} 3초 지연 설정),
loop:true //반복
slidesPerView: 3 //한번에 보여줄 슬라이드수
spaceBetween:10 //슬라이드 사이 여백 (margin-right 값으로 들어감)
centeredSlides: true, //1번슬라이드부터 중앙에 보이기
});

 

[Pagination(점 점 점 버튼 눌러서 페이지 슬라이드) 와 navigation(화살표 버튼으로 슬라이드 넘기기) 설정]

1. index.html swiper-pagination, swiper-prev, swiper-next 선택요소자들 작성

 

 

2. 기존 슬라이드 구동을 할 수 있도록 JS에 작성된 new Swiper에 pagination을 작성한다. el에 index.html에서 pagination의 선택요소자를 연결하고 clickable을 설정하여 클릭하여 반응하도록 설정한다. 아래에는 navigation을 작성하여 prevEl에는 index.html에서 swiper-prev 선택요소자를 nextel에는 swiper-next를 연결한다.

 

 

[pagination 선언]

new Swiper(".promotion .swiper-container",{

pagination:{

el : '.promotion .swiper-pagination',

clickable:true

}

})

 

[navigation 선언]

new Swiper(".promotion .swiper-container",{

navigation:{

prevEl: '.promotion .swiper-prev',

nextEl: '.promotion .swiper-next'

}

})

 

─────────────────────────────────────────────────────

display:flex는 정렬할때 안에 요소들을 flex선언한 요소 크기안에 압축넣는것으로
부모에게 선언해야 안에 자식들이 압축되어모이며 그것을 정렬배치할수있다.

position:absolute를 사용하여 가운데배치
수평은 left:0 right:0 margin:auto;
수직은 top:0 bottom:0 margin:auto;

 

width: calc();
width: calc(819px * 3 + 20px);
width 전체적인 수치 계산으로 사칙연산 사이에 띄어쓰기에 조심해야한다.

 

─────────────────────────────────────────────────────

[요소를 가운데배치 & 확대시 가운데배치]
1.

요소에 position: absolute를 주고
그 요소를 포함하는 부모에겐 position: releative를 준다

그런뒤 left:50%를 주어 왼쪽으로 밀어낸다음에 margin-left:를 주어 요소의 절반만큼을 -px한다. ( 요소크기px / -2 )

2. 부모요소에 display:flex와
justify-content: center;
align-items: center; 를 준다.