제이쿼리 swiper 슬라이더 셋팅 적용

슬라이더 제작방식
	자체제작: 일반적인 경우가 아니므로 분석시간이 소요됨(최소 5일), 레퍼런스가 있어야함
	라이브러리 활용
종류
slick	가장 먼저 개발됐으며 익스하위버전 호환됨
swiper	커스텀 옵션이 매우많음, 모바일특화
swiper4	* swiper4버전 사용해야함, 5버전이상에서 ie호환안됨
bxslider	하코사(하드코딩을사랑하는사람들) 게시물에 누군가 답을 달아주는 바람에 사용자가 조금 생김
주의
	라이브러리 사용시 실 사이트에서 많이보이는 것을 사용해야함
	js라이브러리는 cdn방식(링크연결방식)은 주소가 변경될 수 있기 때문에 사용X, 파일을 직접 연결!

 

 

---

 

 

 

 

Swiper4 다운

 

 

다운로드 파일중 min 붙은 js 파일. css 파일을 작업중 폴더에 복붙

 

 

 

- github -> swiper4 브랜치로 이동 -> dist(최종 릴리즈버전이 있음) -> 파일명 클릭후 Raw클릭 -> 마우스오른쪽으로 저장

---

html 링크 연결 해주기

 

    <!-- 순서변경불가 common이 상단 / 서브css 복사 후 html 연결-->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/common.css?v=<?php echo time(); ?>">
    <link rel="stylesheet" href="css/layout.css?v=<?php echo time(); ?>">
    <!-- 1.라이브러리용 js 2.직접 작성하는 js -->
    <!-- jQuery UI 확장 라이브러리 
      - 특수한 ease 값 사용
      - 드래그엔드랍,resizable , hit 테스트등 구현 어려운 기능이있음
      - datepicker 달력기능 때문에 사용  -->
    <script src="js/jquery-3.6.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <!-- 타임스탬프 필수 -->
    <script src="js/ui_common.js?v=<?php echo time(); ?>"></script>

---

- swiper 기본구조의 클래스명이 변경되었으므로 swiper -> swiper-container로 변경

 

 

swiper에서 슬라이드 소스코드를 가져오자

 

https://swiperjs.com/get-started

html 코드 복사 > html 적용

---

hrml class 명 변경

 

swiper.min파일을 보면 버전명확인 Swiper 4.5.3

 

클래스명만 변경 (구조 이름 변경 금지)

 

 

 

슬라이더 클래스 이름 지정시 클래스변경

 

 

---

스와이퍼 초기화 코드 복붙 > js_common

get started > 

Initialize Swiper

Finally, we need to initialize Swiper in JS:

 

 

 

 

 

 

---

 

복사한 코드를 본인의 양식에 맞게 클래스명을 변경해준다.

 

var mainSlider = new Swiper('.main_slider', {
  direction: 'vertical',
  loop: true,

  pagination: {
    el: '.swiper-pagination',
  },

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

  direction 

vertical 은 세로이기 때문에 슬라이드 가로로 찾기 위해 필요검색 

 

 

스와이프 > API

ctral + f 검색 

 

 

  direction: 'horizontal', 

 

변경

 

 

적용시 화살표 생성