IT 수업 16주차 (81) JAVASCRIPT LIBRARY_SWIPER

 

 

 

SWIPER CDN 주소 : https://cdnjs.com/libraries/Swiper

Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

SWIPER 사이트 주소 : https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

 

● 기본구조 만들기

 

SWIPER 사이트 주소에 들어가

Docs의 Getting started를 클릭해 헤더부분에 CDN을 복사, 붙여넣기 한다.

 

 

 

body 부분에 html layout을 붙여넣는다.

 

 

 

 

 

 

section 2개를 추가하고 아까 복사한 것을 잘라넣기 해서 section 안에 넣는다.

 

 

그리고 헤더에 스타일을 주기위해 경로들을 지정한다.

(문장 복사는 shift+alt+화살표 아래키)

 

 

 

 

 

 

 

 

 

 

 

 

● 이미지 넣기

이미지 폴더를 만들어서 배너로 사용할 이미지를 가져와 넣어준다.

 

 

가져온 이미지들을 a 태그 안에 넣어준다.

 

 

 

그리고 바디에 script를 넣어서 사진들이 자동으로 움직이도록 설정해봤다.

 

 

< 실행화면 >

 

 

해더에 이미지 스타일링을 추가해준다.

 

 

크기가 맞춰졌다.

 

 

 

● 페이지 표현하기

이번에는 페이지수를 표현 해볼 것이다.

 

 

- bullet은 동그라미로 표현이 된다.

 

 

- progressbar는 페이지 수가 바형태로 나오게 된다.

 

 

 

- fraction 은 숫자형식으로 페이지수가 나온다.

 

 

 

bullet을 스타일링 할 수 도 있다.

 

 

 

 

 

 

 

 

● 화살표 버튼 구현하기

화살표 누르면 페이지 이동 구현하기

 

 

 

 

화살표의 모양을 바꿔본다.

모양 바꾸기 위해 구글아이콘에 들어가 원하는 아이콘의 주소와 스타일을 가져와 코드에 넣어준다.

 

 

 

 

변경 할 아이콘을 적용하기 위해 버튼의 div 태그에 변경하고 싶은 아이콘의 이름을 적어준다. 

 

 

 

버튼 스타일 주기

 

 

< 실행화면 >

 

 

 

mousewheel 을 적용하면 마우스휠을 움직였을 때 페이지가 바뀌게 되고

effect를 fade로 화면 화면전환이 사라졌다가 나타나도록 할 수 있다.

 

 

 

 

 

< 다중슬라이더 구현 >

 

● 기본 구조

 

다중 슬라이더를 구현하기 위해 2번째 section에 코드를 넣을 것이다.

swiper의 사이트에 들어가 getting stared를 눌러 html 코드를 가져오고 slide div 태그를 많이 만들어 준다.

 

 

그리고 스타일을 만드는데 위에서 만든 스타일을 가져와 banner-section 을 multi-slider로 바꿔준다.

 

 

 

스타일을 변경해준다.

 

 

 

 

 

 

● 자동 슬라이드 구현

 

2초마다 자동으로 슬라이드 되는 것을 볼 수 있다.

 

 

 

!! 슬라이더에 마진을 잡으면 가운데 맞춤이 깨지게 되므로 마진을 잡으면 안된다.

마진을 잡기위해서는 안에 들어가 슬라이더가 아닌 이미지에 마진을 잡아주면된다.

 

 

 

수직상태에서 가운데 맞춤을 하기위해 위치를 정해준다.

 

 

그리고 모든 박스의 사이즈를 맞춰주기위해 * 로 스타일을 넣어준다.

 

 

 

 

 

새파일 만들어서 SWIPER의 CDN 과 HTML 코드를 가져온다. 그리고 필요없는 것은 지운다

 

 

 

 

세로로 슬라이드를 구현해본다.

 

자동으로 slide들이 세로로 바뀌는 것을 볼 수 있다.