고수님들 슬라이드 메뉴 관련 질문입니다.
본문
모바일 상단에 아래 플러그인을 사용하려고 합니다.
https://darsa.in/sly/#!examples
제가 넣고 싶은 형태는 2번째(Centered) 입니다.
https://darsa.in/sly/examples/horizontal.html
헤매다가 결국 소스는 찾았습니다.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>
<style>
.frame {
height: 250px;
line-height: 250px;
overflow: hidden;
}
.frame ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
font-size: 50px;
}
.frame ul li {
float: left;
width: 227px;
height: 100%;
margin: 0 1px 0 0;
padding: 0;
background: #333;
color: #ddd;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="frame">
<ul class="slidee">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</div>
<!-- 상단 스크롤메뉴 js -->
<script>
var on = $('.slidee').find('.activetop').index();
console.log(on);
var options = {
horizontal: 1,
itemNav: 'centered', //basic , centered,
speed: 300,
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
activateMiddle: 1,
releaseSwing: 1,
activeClass: 'activetop',
startAt: on
// itemSelector:1
};
var frame = new Sly('.frame', options).init();
</script>
<!-- end -->
</body>
그런데 메뉴 부분에 a태그를 넣어서 링크를 걸면 메뉴를 누를 때마다 센터로 자연스럽게 이동하는 것이 작동은 안하네요. 몇 시간째 헤매고 있어 도움을 요청합니다. a태그가 원래 안 먹히는 소스인가요?
