Javascript - Swiper

CHan·2023년 2월 9일
0

Swiper

1. Swiper

	자바스크립트 슬라이드 라이브러리 swiper는
    웹사이트의 90%가 사용하고 있는 기능이다. 
    

1-1. 사용법

	1) Swiper 사이트에 접속하여 Demos 클릭
    
    

	2) 다양한 swiper 중 원하는 효과의 [core]를 선택한다.
     - 네비게이션, 페이지네이션, 프로그레스, 오토플레이 등등..

	3) 스타일 시트의 주소를 가져와 vsc에 넣는다.

    4) 작업하는 스타일 시트보다 위에 있어야 내가 가져온
       swiper에 스타일을 적용시킬 수 있다!
       

	5) 스크립트의 주소도 똑같이 복사한 뒤 스크립트 부분에 넣어준다.
     - 스크립트의 주소는 어디든 상관없다.
    

	6) 기본 마크업 형태와 스크립트가 존재하며 원하는 기능에 따라 
       다른 swiper 기능을 추가하고 수정할 수도 있다.
       
	7) html, script에 있는 'mySwiper'는 원하는 클래스명으로 변경한다. 
     - 여기선 event-slide로 클래스를 주었다.
    

	8) 원하는 마크업과 css 스타일, 스크립트를 적용시켜 확인한다.
     - 보이는 슬라이드의 갯수는 2개로 설정
        (slidePerView: 2)
     - 슬라이드 간의 간격은 10(10px)으로 설정
        (spaceBetween: 10) 
    

	9) live-server를 열어서 확인해 본다.
     - 마우스로 슬라이드를 옆으로 넘기면 다음 슬라이드로 넘어간다.
    

	
profile
Hello World!

0개의 댓글