소스자료실
2017.04.11 09:02

모바일 스와이프 (swipe)

조회 수 38 추천 수 0 댓글 6
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

첨부파일 : swipe.js


.swiper {
	overflow: hidden;
	visibility: hidden;
	position: relative;
}
.swiper-wrap {
	overflow: hidden;
	position: relative;
}
.swiper-wrap  div {
	float:left;
	width:100%;
	position: relative;
	height: 100px;
	background-color: red;
}

window.mySwipe = $('.swiper').Swipe().data('Swipe');



swipe

- 터치스크린에서 손가락으로 좌우 방향으로 쓸어내는 행동


- swiper

- swiper-wrap

- swipe


plug-in : 플러그인

jQuery / javascript

이미 잘 짜여진 프로그램(라이브러리)를 수정없이 프로그램에 포함시키는 기능



1. swipe.js 를 다운 받아서 js/ 폴더에 저장


2. jquery.js 연결


3. swipe.js 연결 <script src="js/swipe.js"></script>


4. css 설정

.swiper {

position: relative;

overflow: hidden;

visibility: hidden;

}

.swiper-wrap {

position: relative;

overflow: hidden;

}

.swiper-wrap .swipe {

position: relative;

float:left;

width:100%;

}


5. script 설정

$(document).ready(function(){

window.mySwipe = $('.swiper').Swipe().data('Swipe');

});


6. html 설정

   <div class="swiper">

    <div class="swiper-wrap">

        <div class="swipe"></div>

        <div class="swipe"></div>

        <div class="swipe"></div>

        </div>

    </div>


!! 주의사항

요소검사에서 device 모드를 모바일로 변경

[Toggle device toolbar]



  • ?
    콘디쌤 2017.04.11 09:25
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>swipe</title>
    
    <style>
    
    body {
    	margin: 0;
    }
    .swiper {
    	position: relative;
    	overflow: hidden;
    	visibility: hidden;
    }
    .swiper-wrap {
    	position: relative;
    	overflow: hidden;
    }
    .swiper-wrap .swipe {
    	position: relative;
    	float:left;
    	width:100%;
    	
    	height: 100px;
    	background-color: red;
    }
    
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/swipe.js"></script>
    <script>
    $(document).ready(function(){
    
    	window.mySwipe = $('.swiper').Swipe().data('Swipe');
    
    });
    </script>
    
    </head>
    
    <body>
    
    	<div class="swiper">
        	<div class="swiper-wrap">
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            </div>
        </div>
    
    </body>
    </html>
    
  • ?
    콘디쌤 2017.04.11 09:31
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>swipe</title>
    
    <style>
    
    body {
    	margin: 0;
    }
    .swiper {
    	position: relative;
    	overflow: hidden;
    	visibility: hidden;
    }
    .swiper-wrap {
    	position: relative;
    	overflow: hidden;
    }
    .swiper-wrap .swipe {
    	position: relative;
    	float:left;
    	width:100%;
    	height: 160px;
    	background-position: center top;
    	background-size: cover;
    }
    .swipe:nth-child(1) {
    	background-image: url(img/item1_visual.jpg);
    }
    .swipe:nth-child(2) {
    	background-image: url(img/item2_visual.jpg);
    }
    .swipe:nth-child(3) {
    	background-image: url(img/item3_visual.jpg);
    }
    
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/swipe.js"></script>
    <script>
    $(document).ready(function(){
    
    	window.mySwipe = $('.swiper').Swipe().data('Swipe');
    
    });
    </script>
    
    </head>
    
    <body>
    
    	<div class="swiper">
        	<div class="swiper-wrap">
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            </div>
        </div>
    
    </body>
    </html>
    
  • ?
    콘디쌤 2017.04.13 10:33
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>swiper</title>
    
    <style>
    
    body {
    	margin: 0;
    }
    
    .swiper {
    	position: relative;
    	overflow: hidden;
    	visibility: hidden;
    }
    .swiper-wrap {
    	position: relative;
    	overflow: hidden;
    }
    .swiper-wrap .swipe {
    	position: relative;
    	float:left;
    	width:100%;
    	padding-top: 16.28%;
    	background-position: center top;
    	background-size: cover;
    }
    .swiper-wrap .swipe:nth-child(1) {
    	background-image: url(img/heren_keyvisual_768_500.jpg);
    }
    .swiper-wrap .swipe:nth-child(2) {
    	background-image: url(img/instyle_keyvisual_768_500.jpg);
    }
    .swiper-wrap .swipe:nth-child(3) {
    	background-image: url(img/woman_keyvisual_768_500.jpg);
    }
    .swiper-wrap .swipe:nth-child(4) {
    	background-image: url(img/ceci_keyvisual_768_500.jpg);
    }
    
    
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/swipe.js"></script>
    <script>
    $(document).ready(function(){
    	window.mySwipe = $('.swiper').Swipe().data('Swipe');
    });
    </script>
    
    </head>
    
    <body>
    
       <div class="swiper">
        	<div class="swiper-wrap">
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            </div>
        </div>
    	
    
    </body>
    </html>
    
  • ?
    콘디쌤 2017.04.13 10:45
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>swiper</title>
    
    <style>
    
    body {
    	margin: 0;
    }
    
    .swiper {
    	position: relative;
    	overflow: hidden;
    	visibility: hidden;
    }
    .swiper-wrap {
    	position: relative;
    	overflow: hidden;
    }
    .swiper-wrap .swipe {
    	position: relative;
    	float:left;
    	width:100%;
    	padding-top: 16.28%;
    	background-position: center top;
    	background-size: cover;
    }
    .swiper-wrap .swipe:nth-child(1) {
    	background-image: url(img/heren_keyvisual_768_500.jpg);
    }
    .swiper-wrap .swipe:nth-child(2) {
    	background-image: url(img/instyle_keyvisual_768_500.jpg);
    }
    .swiper-wrap .swipe:nth-child(3) {
    	background-image: url(img/woman_keyvisual_768_500.jpg);
    }
    .swiper-wrap .swipe:nth-child(4) {
    	background-image: url(img/ceci_keyvisual_768_500.jpg);
    }
    
    .swiper .prev, .swiper .next {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	width: 100px; height: 100px;
    	background-color: orange;
    	cursor: pointer;
    }
    .swiper .next {
    	right: 0;
    }
    .swiper .page-wrap {
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	bottom: 20px;
    }
    .swiper .page {
    	width: 20px; height: 20px;
    	background-color: orange;
    	border-radius: 50%;
    	cursor: pointer;
    	margin-right: 20px;
    	float: left;
    }
    .swiper .page-sel {
    	background-color: red;
    }
    
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/swipe.js"></script>
    <script>
    $(document).ready(function(){
    	
    	window.mySwipe = $('.swiper').Swipe().data('Swipe');
    	
    	$(".swiper .next").click(function(){
    		window.mySwipe.next();
    	});
    	
    	$(".swiper .prev").click(function(){
    		window.mySwipe.prev();
    	});
    	
    	$(".swiper .page").click(function(){
    		
    		$(".page-sel").removeClass("page-sel");
    		$(this).addClass("page-sel");
    		
    		window.mySwipe.slide( $(this).index(), 500); 
    		
    		
    	});
    	
    });
    </script>
    
    </head>
    
    <body>
    
       <div class="swiper">
        	<div class="swiper-wrap">
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            	<div class="swipe"></div>
            </div>
            
            <div class="prev"></div>
            <div class="next"></div>
            
            <div class="page-wrap">
            	<div class="page page-sel"></div>
            	<div class="page"></div>
            	<div class="page"></div>
            	<div class="page"></div>
            </div>
        </div>
    	
    
    </body>
    </html>
    
  • ?
    콘디쌤 2017.04.13 11:15

    자동(오토)슬라이더와 속도 설정


    window.mySwipe = $('.swiper').Swipe({auto: 2000, speed: 1000}).data('Swipe');


  • ?
    콘디쌤 2017.04.13 17:42
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
    <title>swiper</title>
     
    <style>
     
    body {
        margin: 0;
    }
     
    .swiper {
        position: relative;
        overflow: hidden;
        visibility: hidden;
    }
    .swiper-wrap {
        position: relative;
        overflow: hidden;
    }
    .swiper-wrap .swipe {
        position: relative;
        float:left;
        width:100%;
        height: 200px;
        background-position: center top;
        background-size: cover;
        background-color: blue;
        color: #fff;
        font-size: 100px;
        text-align:  center;
    }
    
     
    .swiper .prev, .swiper .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100px; height: 100px;
        background-color: orange;
        cursor: pointer;
    }
    .swiper .next {
        right: 0;
    }
    .swiper .page-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }
    .swiper .page {
        width: 20px; height: 20px;
        background-color: orange;
        border-radius: 50%;
        cursor: pointer;
        margin-right: 20px;
        float: left;
    }
    .swiper .page-sel {
        background-color: red;
    }
     
    </style>
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/swipe.js"></script>
    <script>
    $(document).ready(function(){
        
        
        setTimeout(swiperAni, 1000);
        
        function swiperAni() {
            window.mySwipe.next();
            setTimeout(swiperAni, 1000);
        }
        window.mySwipe = $('.swiper').Swipe({transitionEnd: function(index, elem){
            $(".page-sel").removeClass("page-sel");
            $(".page").eq(index).addClass("page-sel");
        }}).data('Swipe');
         
        $(".swiper .next").click(function(){
            window.mySwipe.next();
        });
         
        $(".swiper .prev").click(function(){
            window.mySwipe.prev();
        });
         
        $(".swiper .page").click(function(){
             
            $(".page-sel").removeClass("page-sel");
            $(this).addClass("page-sel");
            window.mySwipe.slide( $(this).index(), 500);
        });
         
    });
    </script>
     
    </head>
     
    <body>
     
       <div class="swiper">
            <div class="swiper-wrap">
                <div class="swipe">A</div>
                <div class="swipe">B</div>
                <div class="swipe">C</div>
                <div class="swipe">D</div>
            </div>
             
            <div class="prev"></div>
            <div class="next"></div>
             
            <div class="page-wrap">
                <div class="page page-sel"></div>
                <div class="page"></div>
                <div class="page"></div>
                <div class="page"></div>
            </div>
        </div>
         
     
    </body>
    </html>
?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
447 소스자료실 스크롤 클리핑 콘디쌤 2017.05.31 26
446 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
445 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
444 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
» 소스자료실 모바일 스와이프 (swipe) 6 file 콘디쌤 2017.04.11 38
442 소스자료실 ellipsis 글자... 콘디쌤 2017.04.06 25
441 소스자료실 이미지 꾸물럭 거리기 콘디쌤 2017.03.31 24
440 소스자료실 맥북 덮개 열리기 콘디쌤 2017.03.30 25
439 소스자료실 동영상 클리핑 1 콘디쌤 2017.03.30 25
438 소스자료실 다이아몬드 썸네일 콘디쌤 2017.03.30 21
437 소스자료실 스크롤 내릴 때 선 그려지기 6 콘디쌤 2017.03.21 35
436 소스자료실 팝업 창 하루 동안 안 보이게 하기 콘디쌤 2017.03.20 32
435 소스자료실 파이차트 애니메이션 콘디쌤 2017.03.20 17
434 소스자료실 CSS로 도형 그리기 1 콘디쌤 2017.03.15 33
433 소스자료실 슬라이더 갤러리 + 팝업 기본형 콘디쌤 2017.03.06 63
432 소스자료실 스크롤을 내리면 게이지 바가 늘어남 콘디쌤 2017.03.03 41
431 소스자료실 마우스를 올리면 흑백이미지에서 컬러이미지로 변환 콘디쌤 2017.03.03 44
430 소스자료실 Datepicker Widget 콘디쌤 2016.10.15 159
429 소스자료실 Google Hosted Libraries (CDN) 2 콘디쌤 2016.07.13 421
428 소스자료실 캐러셀 + 페이드 슬라이더 예제 콘디쌤 2016.06.23 213
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 23 Next
/ 23