[#CSS] Swiper 슬라이드 생성하기, 이미지 슬라이드, 유튜브 슬라이드

 

 

 

 

 

가로로 슬라이드할 수 있는 이미지 슬라이드를 사용하려고 한다

swiper를 쉽게 사용해보자

 

 

 

 

 

swiperjs.com/demos/

Swiper Demos

 

 

 

⑴ 설치

 

① CDN으로 사용

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

 

② NPM 설치

npm install swiper

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';

const swiper = new Swiper(...);

 

둘 중 편한 방법으로 설치한다

 

 

 

 

⑵ html 

<div class="swiper-container">
    <!-- 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>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

 

 

 

 

 

⑶ script

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',		// 가로 슬라이드
  loop: true,
  slidesPerView: 1.5,			// 한 영역에 보이는 슬라이드 수
  spaceBetween: 16,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

 

 

 

 

 

간편하게 사용 가능하다