swiper 스와이프 메뉴 클릭하면 가온데 오기 중 a링크 넘어가면 on 안먹힘 채택완료

</p>

<pre>
<style></pre>

<pre tabindex="0">
<code data-lang="css" id="actual-css-code">.snbSwiper { padding: 0 3px;box-sizing: border-box;background: powderblue; }
.swiper-slide { width: auto !important; }
.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; }</code></pre>

<pre>
</style></pre>

<pre>
<script></pre>

<pre tabindex="0">
<code data-lang="javascript" id="actual-js-code">var swiper = new Swiper('.snbSwiper', {
            slidesPerView: 'auto',
            preventClicks: true,
            preventClicksPropagation: false,
            observer: true,
            observeParents: true
        });
        var $snbSwiperItem = $('.snbSwiper .swiper-wrapper .swiper-slide a');
        $snbSwiperItem.click(function(){
            var target = $(this).parent();
            $snbSwiperItem.parent().removeClass('on')
            target.addClass('on');
            muCenter(target);
        })

        function muCenter(target){
            var snbwrap = $('.snbSwiper .swiper-wrapper');
            var targetPos = target.position();
            var box = $('.snbSwiper');
            var boxHarf = box.width()/2;
            var pos;
            var listWidth=0;
            
            snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })
            
            var selectTargetPos = targetPos.left + target.outerWidth()/2;
            if (selectTargetPos <= boxHarf) { // left
                pos = 0;
            }else if ((listWidth - selectTargetPos) <= boxHarf) { //right
                pos = listWidth-box.width();
            }else {
                pos = selectTargetPos - boxHarf;
            }
            
            setTimeout(function(){snbwrap.css({
                "transform": "translate3d("+ (pos*-1) +"px, 0, 0)",
                "transition-duration": "500ms"
            })}, 200);
        }</code></pre>

<pre>
</script></pre>

<pre tabindex="0">
<code data-lang="htmlmixed" id="actual-html-code"><link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css"></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script></a>

<div class="swiper-container snbSwiper" style="max-width:420px">
    <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 on"><a href="a.html"><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="b.html"><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></code></pre>

<p>