스와이프

<div class="tab-conts">
								<div class="tab-inner">
									
									<div class="tab-cont">
										<span style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-shadow:0 0 5px rgba(255,255,255,1);">Menu 01</span>
									</div>

<div class="tab-cont">
										<span style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-shadow:0 0 5px rgba(255,255,255,1);">Menu 02</span>
									</div>

<div class="tab-cont">
										<span style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-shadow:0 0 5px rgba(255,255,255,1);">Menu 03</span>
									</div>

<div class="tab-cont">
										<span style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-shadow:0 0 5px rgba(255,255,255,1);">Menu 04</span>
									</div>
									
								</div>
							</div>
							
						</div>

$(window).on('load', function(){
							swiper();

$(document).on('click', '.tab-wrap .navigation button', function(){
								var $tab = $(this).closest('.tab-wrap');
								var idx = $(this).index();
								var len = $(this).closest('.tab-wrap').find('.tab-cont').length;
								var wid = 100 / len;
								var lft = wid * - idx;
								$(this).addClass('on').siblings('button').removeClass('on');
								$tab.find('.tab-item').removeClass('on').eq(idx).addClass('on');
								$tab.find('.tab-inner').css({'transform':'translateX(' + lft + '%)', 'transition':'all .3s'});

setTimeout(function(){
									$tab.find('.tab-inner').css({'transition':'all 0s ease 0s'});
								}, 300);
							});

$('.tab-conts').bind('touchstart', function(e){
								startX = e.originalEvent.changedTouches[0].screenX;
								startY = e.originalEvent.changedTouches[0].screenY;
								innerLft = $(this).find('.tab-inner').offset().left;
							});

$('.tab-conts').bind('touchmove', function(e){
								moveX = e.originalEvent.changedTouches[0].screenX;
								moveY = e.originalEvent.changedTouches[0].screenY;

moveL = innerLft - (startX - moveX);
								if(moveL < -70 || moveL > 70){
									$(this).find('.tab-inner').css({'transform':'translateX(' + moveL + 'px)'});
								}
							});

$('.tab-conts').bind('touchend', function(e){
								endX = e.originalEvent.changedTouches[0].screenX;
								endY = e.originalEvent.changedTouches[0].screenY;

var $tab = $(this).closest('.tab-wrap');

var len = $tab.find('.tab-cont').length;
								var wid = 100 / len;
								var idx = $tab.find('.navigation button.on').index();
								var lft = wid * - idx;

var slideX = 100;

if(startX - endX > slideX || startX - endX < -slideX){
									//next
									if(startX - endX > slideX){
										if($tab.find('.navigation button:last-child').hasClass('on')){
											$tab.find('.tab-inner').css({'transform':'translateX(' + lft + '%)'});
										}else{
											$tab.find('.navigation button.on').next('button').trigger('click');
										}
									}
									//prev
									if(startX - endX < -slideX){
										if($tab.find('.navigation button:first-child').hasClass('on')){
											$tab.find('.tab-inner').css({'transform':'translateX(' + lft + '%)'});
										}else{
											$tab.find('.navigation button.on').prev('button').trigger('click');
										}
									}
								}else{
									$tab.find('.tab-inner').css({'transform':'translateX(' + lft + '%)'});
								}
							});

$(document).on('click', '.tab-lst .tab-item .btn', function(){
								$(this).closest('.tab-item').addClass('on').siblings('.tab-item').removeClass('on');

var idx = $(this).closest('.tab-item').index();
								$(this).closest('.tab-wrap').find('.navigation button').eq(idx).trigger('click');
							});
						});

function swiper(){
							$('.tab-wrap').each(function(){
								$('.navigation').remove();

var $tab = $(this).closest('.tab-wrap');
								var len = $(this).find('.tab-cont').length;
								var wid = 100 * len;
								var contW = 100 / len;
								$(this).find('.tab-inner').css({'width':wid + '%'});
								$(this).find('.tab-cont').css({'width':contW + '%'});

$(this).append('<div class="navigation" style="display:none;"></div>')

$(this).find('.tab-cont').each(function(idx){
									$tab.find('.navigation').append('<button>' + idx + '</button>');
									$tab.find('.navigation button:first-child').addClass('on');
								});
							});
						}

스와이프

예제

코드

- html

- css

- script