본문 바로가기

현재 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>

어쩌다보니여기까지

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

55
  • 이전 댓글 더보기
  • 프로필사진 퍼블리셔맨 2019.12.16 17:00
    헐이거뭐임?
  • 관심주셔서 감사합니다.
  • 프로필사진 1 2019.12.16 18:09
    안녕하세요.
    호\
  • 프로필사진 1 2019.12.16 18:10
    swipe 세로
  • 프로필사진 1 2019.12.16 18:11
    출력하려면 어떻게 해야함요??
    막 이렇게 얘기해도 됨?
    근데 이거 머지요??좋네요.
  • 세로로 나오게 하는 옵션이 있읍죠
  • 프로필사진 2 2019.12.18 12:35
    이거 신기하네요 댓글기능인건가.
  • 프로필사진 d 2019.12.19 14:43
    와 이게모죵
  • 티스토리 입니다.
  • 프로필사진 jenna 2019.12.20 12:54
    반응형일때 모바일에서만 swipe를 사용하고 PC에서는 swipe사용 안하려면 어떻게 해야 하죠?
  • 자바스크립트로 모바일 환경인지 PC환경인지 확인 후 모바일일 경우만 스와이프가 실행되게 하면 됩니다
    접속환경 확인하는 방법은 인터넷에서 찾아볼 수 있을꺼에요
  • 프로필사진 jenna 2019.12.20 12:59
    $(document).ready(function() {
    listSwipe();
    $(window).resize(function(){
    //창 크기가 변경될 경우
    listSwipe();
    });
    });

    function listSwipe() {
    if($(window).width() <= 768) {
    console.log('모바일');
    $('#wrap').addClass('small-wrap');
    $('.list-article .list-wrap').addClass('swiper-container');
    $('.list-article .list-wrap .list').addClass('swiper-wrapper');
    $('.list-article .list-wrap .list li').addClass('swiper-slide');

    //모바일 리스트 swipe
    mobileListArticleSwiper = new Swiper('.list-article .swiper-container', {
    freeMode: true,
    slidesPerView : 'auto',
    spaceBetween: 10,
    centeredSlides: true
    });
    } else{
    console.log('PC');
    $('#wrap').removeClass('small-wrap');
    $('.list-article .list-wrap').removeClass('swiper-container');
    $('.list-article .list-wrap .list').removeClass('swiper-wrapper');
    $('.list-article .list-wrap .list li').removeClass('swiper-slide');
    }
    }
  • 프로필사진 jenna 2019.12.20 13:00
    이렇게 사용해도 PC에서 swipe가 지워지지 않아서요...
  • 모바일이면 가로가 768보다 더 작게해야할것 같은데요.
  • 프로필사진 jenna 2019.12.20 13:02
    cosole찍어보면 모바일과 pc로 반응이 나타나는데 swipe는 PC에서도 mobile에서도 여전히 남아 있고 새로고침 해야만 없어집니다.
  • 제가 저녁에 좀 자세히보겠습니다.
  • 프로필사진 공이 2019.12.28 01:04
    onclick 으로 overly 기능을 넣었는데 작동을 하지 않네요;;
  • 프로필사진 공이 2019.12.28 01:05
    혹시 html 드리면 해결해주실수 있나요?
  • 죄송해요
  • 프로필사진 Favicon of https://cokar.tistory.com BlogIcon 수이르 2020.01.08 21:44 신고
    안녕하세요! 혹시 https://binaryblocks.io/ 이 링크의 하단에 있는 회사 로고들이 콘베이어벨트에 있는 것처럼 계속 흐르고 있게 하는 옵션이 따로 있을까요??
  • 지금 외부라 테스트는 못해봤지만 speed, autoplay, loop 옵션을 잘 조절하면 가능하지 않을까요.
  • 프로필사진 풀이 2020.01.16 14:01
    vue 코드에 css코드가 (sass) 적용되어 있는데요 에디터 편집이 아닌 GUI 툴로 자동 생성하는 프로그램이 있어요?



  • vue ui라고 GUI형태로 프로젝트를 생성관리하는 기능은 vue cli에서 제공해 주고 있습니다.

    원하시는게 이게 아니라면....
    드림위버나 나모웹에디터처럼 위지위그로 vue를 자동생성하는 gui툴을 말씀하시는 거라면 제가 알고 있기로는 현재 없는것 같습니다.
  • 프로필사진 밍밍 2020.01.17 11:11
    안녕하세요 혹시 https://spot.film/works 페이지 스크롤 시 컨텐츠 영역 사이가 늘어나는 효과 주는 옵션이 따로 있을까요?ㅠㅠ
  • 네.. 찾아보시면 있습니다. 찾아드리고 싶은데 밖에 있어서 못찾아드리지만.. 그런 옵션이 있습니다.
  • 제가 잘못이해 한걸수도 있겠네요. 제가 말한거는 그냥 컨텐츠끼리의 여백 공간을 조절할수있다는 이야기였습니다.
  • 프로필사진 밍밍 2020.01.17 16:01
    아 여백공간 조절하는 방법을 알고있는데 스크롤시 나타나는 효과도 지정 할 수 있나 해서요ㅠ 넵 알겠습니다 감사합니다!
  • 프로필사진 tthtth 2020.01.20 14:21
    안녕하세요! 혹시 swiper slider 이용시 클릭으로 넘어가는거 동작 말고 슬라이드하면서 넘기는거 동작 못하게 할수 잇나요?
  • 슬라이드 페이지 넘기는 것 말씀하시는 거면 기본으로 제공되는 기능일텐데요. 슬라이드하면서 다음페이지로 넘기는거... 가능합니다.
    혹시 클릭하면 해당 상세페이지로 새로 화면을 불러오는 것 처럼 슬라이드로 새로 화면 불러오기가 가능하냐고 묻는 것이라면 기능적으로는 가능할텐데.. 그게 의미가 있는지 모르겠네요 ^^
  • 프로필사진 도로도롱 2020.01.20 15:28
    swiper 시작 정지버튼이 크롬에서는 정상적으로 센터위치에 잘있는데
    익스플로러에서는 배너 맨왼쪽 끝으로 붙어 버렸습니다. 어떻게 해야할까요?
  • 이 부분은 js문제는 아니고 css의 문제 인것 같습니다. 해당 버튼에 적용된 CSS쪽을 확인해 보고 맞추는 작업이 필요할 것 같습니다.
  • 프로필사진 serpong 2020.01.21 12:30
    이거 아이디어 조으네요 ㅎㅎ
  • 감사합니다 ^^
  • 프로필사진 접신 2020.01.21 15:16
    댓글 같은 기능인데 톡식으로 되어있으니 보기가 좋네요
  • 감사합니다 ^^