패스트캠퍼스 환급챌린지 25일차 미션 (2월 25일) : 프론트엔드개발 강의 후기

오늘의 목표

16. 요소 슬라이드 -공지사항

17. Swiper.js 라이브러리 버전 확인하기

18. 요소 슬라이드 - 수직 슬라이드(Swiper)

 

 

오늘은 게으름을 엄청 피우다가 강의를 듣기 시작했다.

스타벅스 예제를 하면서 사실 사이트 하나를 만드는데에 들어가는 코드가 점점 길어지고, 네이밍도 헷갈리고 __언더바를 두개쓰고 네이밍을 써야하는 게 생기니까 어디에 들어있는 태그 안에 들어있는 태그 안에;.....

엄청 태그가 길어지고 많아진다.

가로로도 세로로도 길어지는 태그 속에서.. 멘붕이다.

 

오 대박 오늘 스와이프 에서 원하는 demo 들을 찾아서 어떻게 코드로 입력하면 되는 것인지를 알 수 있었다.

get started 설치를 하고 나서 스크립트 파일 연결을 해서 공유하면 된다...

 

 

 

간단하게 요소슬라이드를 작성해보았음

 

display: flex;

justify-contents : center;

 

 

수직(vertical)슬라이드를 만든다!

코드를 들어가보면 swiper 쪽에 랩퍼에 슬라이드가 각각 들어가 있다.

 

swiper 는 뭘까?

 

swiper는 하드웨어 가속 전환과 여러 기본 동작을 갖춘 현대적인 슬라이드 라이브러리 다.

 

swiper사용방법 2가지

1) CDN 방식

CDN(Content Delivery Network; 컨텐츠 전송 네트워크)이란

컨텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템

 

2) swiper js파일을 직접 다운 받아 삽입하는 방식

 

*두 방식은 상황에 따라 다르다.
인터넷 환경이 잘 갖춰져 있다면 CDN과 직접 파일 읽기 방식 큰 차이가 없을 수 있지만 

CDN 방식은 서비스에서 사용하지 않는 이미지나 기능도 끌어오기에 로딩속도에 영양을 끼칠 수 있다.
하지만 간단히 적용하고 디버깅하는 용도라면 직접 파일을 받는것보다 코드 몇 줄이 좋을 거 같다.

 

<!-- in HEAD -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-name.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-name.min.js"></script>

HEAD 태그안에 css,js 라이브러리를 삽입해 줍니다.
이때 꼭 두개의 파일 다 필요합니다.

 

스와이프 설치하는 코드 중에 원본이 아니라 축약해놓은 내용에는(최적화,압축) 코드 중간에 .min 이 붙어있다.

*min : 원본을 조금 더 최적화해서 압축시킨 버전

 

 

 

HTML

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <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-pagination"></div>
  <!-- 이전, 다음 버튼 필요시 추가 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- 스크롤 필요시 추가 -->
  <div class="swiper-scrollbar"></div>
</div> 

 

body 태그 안에 위와 같이 태그에 class만 넣어주고 스크립트에서 슬라이드로 사용할 태그를 지정만 해주면 된다.
swiper > swiper-wrapper > swiper-slide 구조

 

 

 

JS

new Swiper('.swiper', {
    // 다양한 옵션 설정, 
    // 아래에서 설명하는 옵션들은 해당 위치에 들어갑니다!!
    slidesPerView : 'auto',
    spaceBetween : 2, 
})

new Swiper(선택자, 옵션) 함수에 문자 데이터 형태로 선택자를 인수로 삽입, 옵션을 객체 데이터 형식으로 넣어주면 된다.

 

자주사용하는 Swiper 옵션들

*이건 꼭 참고하자!!!

 

new Swiper('.swiper', {
  direction: 'vertical', // 슬라이드 진행 방향, 기본값 horizontal(가로)
  
  // autoplay: true 도 가능하지만 객체 데이터로 할당하면 추가적인 옵션 설정 가능
  autoplay: {
    // 자동재생 여부
    delay: 5000, // 시작시간 설정
  },
  loop: true, // 반복재생 여부
  slidesPerView: 3, // 한번에 보여줄 슬라이드 개수
  spaceBetween: 10, // 슬라이드 사이 여백
  centeredSlides: true, // 1번 슬라이드가 가운데 보이기
  
  // 페이저 버튼 사용자 설정
  pagination: {
    // 페이지 번호 요소 선택자
    el: '.promotion .swiper-pagination',
    
    // 사용자의 페이지 번호 요소 제어 가능 요소 (사용자가 단순히 시각적으로만 보는것 뿐만아니라 눌러서 제어할 수 있는지에 대한 여부)
    clickable: true,
  },
  
  // nav 화살표 출력 시 추가
  navigation: {
    prevEl: '.swiper-prev',
    nextEl: '.swiper-next',
  },

});

 

 

 

 *initialize 는 초기화를 의미한다.

 

오늘은 여기까지만.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]