Recent Posts
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
관리 메뉴

공부하자

제이쿼리 플러그인 슬라이드 효과 2. Swiper 본문

J-Query·Plug-in

제이쿼리 플러그인 슬라이드 효과 2. Swiper

bluemoon527 2021. 1. 12. 00:24

Swiper

: 슬라이드 효과를 줄 수 있는 제이쿼리 플러그인. 

Swiper에서 제공하는 각종 옵션값을 수정해 다양하게 표현 할 수 있다. (ie 9 버전부터 지원)

 

 

bxslider 와 Swiper 의 차이

: bxslider는 Swiper 보다 간결하고 깔끔해 사용하기에 편리하나 swiper에 비해 기능이 제한적이므로

사용자가 상황에 맞게 선택하여 사용하면 된다. 어떤 것이 더 옳고 그른 것은 없다.

 

 

swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

 

 

 

 

사용법

1. Swiper에서 제공하는 플러그인 파일 다운로드 및 프로젝트 파일에 js, css 연결

cdn을 지원하므로 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>

 

 

2. Swiper 기본 구조 및 js

//swiper 초기화

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // 아래부터는 필요한 경우
  // 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',
  },
})

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>

</head>
<body>

<!-- swiper의 기본 구조 -->
<!-- Slider main container -->
<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>
		
</body>
</html>

 

 

3. js 에 필요한 옵션값 추가

//swiper 초기화

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true, // 반복 여부 true/false
  speed: 3000, // 속도
  effect: slide, // 효과
  slidesPerView: 3, // 슬라이드 페이지당 보여지는 이미지 수
  spaceBetween : 30 // 슬라이드 간 간격

})

 

* swiper 에서는 데모 파일을 제공한다. 참고하여 여러 효과의 슬라이더를 제작하기 쉽다.

js 수정이 필요할땐 제공하는 옵션을 참고하여 수정.

 

css 수정이 필요한 경우엔 swiper에서 제공하는 css 파일을 건드리지 말고 작업중인 css 파일에 해당 class 혹은 id 값을 불러와 수정.

혹은 따로 class를 추가하여 수정하거나 우선 순위로 css 적용이 안 될 경우 !important.

swiper 에서 제공하는 css 파일에서 필요한 것만 가져다 작업해도 된다. 이럴 경우 오류가 날 수도 있으니 어떤 것이 필요하고 필요없는지 잘 확인 할 것!

 

 

 

 

 

swiper parameters

swiperjs.com/api/#parameters

 

Swiper API

Swiper API Improve this Doc Swiper Full HTML Layout Slide 1 Slide 2 Slide 3 ... Styles Swiper package contains different sets of CSS, Less and SCSS styles: CSS Styles CSS styles for bundle version: swiper-bundle.css - all Swiper styles including all compon

swiperjs.com

 

 

swiper demos

swiperjs.com/demos/

 

Swiper Demos

 

swiperjs.com

 

 

 

 

 

'J-Query·Plug-in' 카테고리의 다른 글

페이지 스크롤 다운 애니메이션  (0) 2021.03.10
제이쿼리 플러그인 슬라이드 효과 3. owl.carousel.js  (0) 2021.03.10
움직이는 배경을 넣고 싶을 때 사용하는 particles.js  (0) 2021.01.25
제이쿼리 플러그인 풀스크린 스크롤 효과 fullPage  (0) 2021.01.11
제이쿼리 플러그인 슬라이드 효과 bxslider  (0) 2021.01.11
'J-Query·Plug-in' Related Articles more
Comments