스와이프 메뉴 클릭하면 가온데 오기 중 a링크 넘어가면 on 안먹힘
본문
<style>
html { overflow-y: scroll; font-family: sans-serif; font-size: 16px; min-width: 320px; line-height: 1.5em; color: #333; }
body{margin:0;padding:0;}
.snbSwiper { padding: 0 3px;box-sizing: border-box;background: powderblue; }
.swiper-wrapper { box-sizing: content-box; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
.swiper-slide { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; width: auto; }
.swiper-slide a { display: block; text-align: center; }
.swiper-slide .text { margin: 0 5px; padding: 16px 5px 8px 5px; box-sizing: border-box; position: relative; display: inline-block; height: 47px; white-space: nowrap; font-size: 1rem; line-height: 1em; color: #333; }
.on .text { color: #1b64bc; font-weight: bold; }
.on .text:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #1b64bc; }
</style>
<div class="swiper-container snbSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><span class="text">포도</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">블루베리</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">딸기</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">자두수박</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">바나나</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">망고스틴레드</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">사과</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">천도복숭아</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">수박</span></a></div>
<div class="swiper-slide"><a href="#"><span class="text">용과</span></a></div>
</div>
</div>
<script>
$(function(){
var swiper = new Swiper('.snbSwiper', {
slidesPerView: 'auto',
preventClicks: true,
preventClicksPropagation: false,
observer: true,
observeParents: true
});
var $lankTitle = $('.snbSwiper .swiper-wrapper .swiper-slide a');
$lankTitle.click(function(){
var target = $(this).parent();
$lankTitle.parent().removeClass('on')
target.addClass('on');
muCenter(target);
})
function muCenter(target){
var snbwrap = $('.snbSwiper .swiper-wrapper');
var targetPos = target.position();
var winHarf = $('body').width()/2;
var pos;
var wrapWidth=0;
snbwrap.find('.swiper-slide').each(function(){
wrapWidth += $(this).outerWidth();
})
if ((targetPos.left + target.outerWidth()/2) <= winHarf) { // left
pos = 0;
}else if ((wrapWidth - targetPos.left - target.outerWidth()/2) <= winHarf) { //right
pos = wrapWidth-$('body').width();
}else {
pos = targetPos.left - winHarf + (target.outerWidth()/2);
}
setTimeout(function(){snbwrap.css({
"transform": "translate3d("+ (pos*-1) +"px, 0, 0)",
"transition-duration": "500ms"
})}, 200);
}
})
</script>
구글 서칭중 웹밤바님의 티스토리 블로그에서 스와이프 메뉴 클릭하면 가운데오기 소스를 발견했는데요
모바일 서브메뉴에 적용하려니 a링크의 #일때는 메뉴 구현이 정상적으로 되는데 링크를 넣으니 active가 안먹히더라구요.. 이런 경우에는 어떤 것을 봐야할까요? 주소값이 넘어가면서 리셋되는것 같은데...
