본문 바로가기

현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다.
모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다.

MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다.

홈페이지

DEMO

Install

아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다.

  • bower로 설치할 경우
$ bower install swiper
  • 또는 Atmosphere as Meteor 패키지로 설치할 경우
$ meteor add nolimits4web:swiper
  • 또는 NPM으로 설치할 경우
$ npm install swiper
  • 또는 CDN으로 사용할 경우
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>

CDN으로 적용하는 예제

CDN으로 적용하는 예제는 아래와 같습니다.
아래와 같이 js와 css에 대하여 swiperswiper.min 중 하나만 적용하면 됩니다.

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
</head>
<body>
    ...

   <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
</body>
</html>

기본골격

html내에 슬러이더가 나올 부분의 Markup의 기본골격은 아래와 같습니다.

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- 슬라이더 입니다. -->
        <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>

CSS

기본 스와이프 될 컨테이너의 사이즈를 잡으시면 됩니다.

.swiper-container {
    width: 600px;
    height: 300px;
}

javascript

마지막으로 JS에서 Swiper를 초기화해야합니다.
<body>...</body>태그 내의 하단에 아래와 같이 javascript를 작성하시면 됩니다.

<body>
  ...

    <script>
    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',
    },
    })
    </script>
</body>

만약 jquery나 Zepto를 사용한다면 아래의 코드로 대체할 수 있습니다.

<script>
    $(document).ready(function () {
        //initialize swiper when document ready
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            direction: 'vertical',
            loop: true
        })
    });
</script>

어쩌다보니여기까지

고급지게 만들어 저렴하게 배포는 공작소

103
  • 이전 댓글 더보기
  • 프로필사진 ㅁㄴㅇㄹ 2020.01.30 20:13
    신기하네요
  • 감사합니다
  • 프로필사진 1111 2020.01.31 10:56
    ㅇㄴㅇㄻㄴㄻㄴㄹㄴㄹㄴㅁㅇㄹㄴㅁㅇㄹ123213
  • 의미없는 댓글 사절입니다
  • 프로필사진 신기해요 2020.01.31 13:35
    슬라이더 글을 보러왔는데 댓글창이 신박하네요ㅋㅋㅋㅋ 대단하십니다
    이렇게 댓글 달면 알림도 가나요?
  • 네.. 옵니다^^ 알람은 티스토리앱으로 와요~
  • 프로필사진 니키사와 2020.01.31 23:18
    ㅇㄴㅀㄴㅇㄴㄹ큫ㅊㅍ
  • 프로필사진 1111 2020.02.03 13:32
    혹시 스와이프 안정화 버전이 몇까지인지 알수 있을까요?
  • 별도로 안정화 버전을 관리하지는 않는 것으로 알고 있습니다. 그냥 계속 개선버전을 올리는 것 같아요.
    현재는 v5.3.0이 최신 버전이네요.
  • 프로필사진 botton 2020.02.03 15:35
    안녕하세요! swiper 슬라이드 이미지가 마지막까지가면 다시 1번 이미지로 돌아갈때 앞으로 돌아갔다가 다시 시작하는데 1번슬라이드로 돌아갈때도 그냥 다음슬라이드 넘어갈 때 처럼 하고싶은데 어떻게 하면 될까요?
  • 프로필사진 botton 2020.02.03 15:49
    찾았습니다! loop 였네요. 설명보다가 찾았네요 감사합니다 :D
  • 네~ ^^ 도움이 되서 다행이에요 ~
  • 프로필사진 YeongHyeon 2020.02.07 11:49
    안녕하세요 next js 에서 swiper 사용 중인데요..
    infinite loading 적용 하려고 하는데
    처음 10개 리스트에서 추가 10개 가져와서 20개 되었을 때
    11번째 item까지는 swiping되는데 그 다음 item으로 이동 되지 않는데
    (11번째 item을 click했을 때(내릴때만) 10번째 item으로 focus 잡히는거 같아요
    올릴때는 11번째 item에 focus있어요..)
    어떤 issue일까요?
    (Swiper.slides에서 리스트는 추가되어있어요)
  • 프로필사진 ^_^ 2020.02.07 15:47
    swiper 로 슬라이더 구현하려는데 똑같이 복사를 하고 화면까지 잘 나왔는데
    슬라이더 <> 버튼이 작동을 안 하네요. 어떤 걸 건드려야 정상 작동할까요?
  • 다른 코드랑 충돌이있는것은 아닐까요?
    옵션만 설정하면 잘 나올 텐데요
  • 프로필사진 빈센트 2020.02.10 14:11
    가운데 이미지 사이즈는 100% 크기이고, 좌,우 첫번째 이미지는 약 80% 사이즈, 좌,우 두번째 이미지는 ㅇ약 50% 사이즈 ... 등등 그렇게 놓이고 좌 우 버튼 눌러서 좌 우 이미지가 슬라이드 되도록 하는 스크립트이며, 모바일도 완벽 지원 되는 swiper 소스를 찾고 있습니다. ㅠㅠ 혹시 예제 소스를 어디서 구할 수 있을까요? transform: translate3d(206.7px, 0px, -215px) rotateX(0deg) rotateY(0deg); 이런식으로 좌, 우 이미지를 조절하는거요...
  • 죄송합니다. 저도 저런식으로 구성된 소스는 없습니다. 꼭 swiper말고 저런식으로 구현된 오픈소스가 있지않을까 합니다.
    별도움이 못되서 조송합니다. ㅠㅠ
  • 프로필사진 빈센트 2020.02.10 14:13
    위 질문드린 내용의 실제 적용 페이지 입니다.
    링크 누르신 후 페이지 거의 하단 부분에 위치해 있으며 페이지가 길다보니 "from the magazine"
    검색하시면 두번째 검색되는부분에 있습니다. 이 곳에서도 swiper 소스로 제작되어진것으로 판단 됩니다. https://www.nationalgeographic.com/magazine/2020/02/clotilda-americas-last-slave-ship-stole-them-from-home-it-couldnt-steal-their-identities-feature/
  • 프로필사진 2020.02.10 19:20
    안녕하세요. cdn으로 되어있는 링크를 다운받아서 서버에 올려두고 사용해도 되는지요? 영어가 안되서 문의 드립니다.. 감사합니다.
  • cdn은 링크만 제공해주는 서비스로 다운받을 수는 없습니다.
    대신에 다운받을 수 있게 github에서 제공해 주고 있을겁니다.
    다운받아서 쓰셔도 됩니다. 대신에 출처는 표시해야되요
  • cdn은 링크만 제공해주는 서비스로 다운받을 수는 없습니다.
    대신에 다운받을 수 있게 github에서 제공해 주고 있을겁니다.
    다운받아서 쓰셔도 됩니다. 대신에 출처는 표시해야되요
  • 프로필사진 lll 2020.02.14 16:51
    혹시 swiper로 원하는 슬라이드 먼저뜨게 할 수 있나요?
    인터넷 구글링하다 올려봐요
  • 옵션 설정으로 가능할 겁니다
  • 프로필사진 jUN 2020.02.17 10:23
    우왕 실시간 댓글인가여?
  • 티스토리 댓글입니다 ^^
  • 프로필사진 jUN 2020.02.17 10:23
    신기신기
  • 프로필사진 jUN 2020.02.17 10:23
    채팅형 댓글창은 첨보네영
  • 네~ 티스토리 댓글의 UI만 변경했습니다
  • 프로필사진 나그네 2020.02.17 13:14
    수고많으십니다..
    다름이 아니라 적용을 했는데 모바일에서는 가운데 정렬이 되는데
    pc에서는 가운데정렬이 안되네요... 방법이 있을까요??
  • CSS 쪽을 확인하셔야 할것 같습니다.
  • 프로필사진 까아꿍 2020.02.19 13:35
    가로 swiper안에 또 가로 swiper를 넣을 수 있을까요?ㅜㅜㅜ
  • 넣을수 있는것으로 알고 있습니다
  • 프로필사진 세레이 2020.02.20 15:38
    슬라이더 글 찾다. 신기해서 글 남겨 봅니다. 신기하네용 ㅋ
  • 감사합니다 ^^
  • 프로필사진 choy 2020.06.22 11:05
    슬라이드가 중앙에 올때 중앙에 위치한 이미지 사이즈만 크게 변경할 수 있나요?