java script 메모

vTicker 플러그인

그나쓰 2023. 2. 12. 23:07

이번주 업무하면서 가장 많이 쓴 플러그인이다.

상하로 롤링이 되는 플러그인으로

실시간으로 롤링되는 리스트같은걸 만들 수 있다.

업무 특성상 페이지 카피가 많은데,

카피해야하는 페이지가 다 vTicker를 쓰고 있더라

구글에 검색해보니 최신글은 없어서 이걸 쓰는게 맞나 싶지만

카피하라니 나도 뭐 써야지 뭐 ,,, 궁시렁궁시렁

 

플러그인은 세상 간단.

div 안에 ul 과 li를 넣어주고 아래처럼 맞는 옵션을 채워주면 끝

 

<div id="list">
  <ul>
    <li>롤링 리스트 1</li>
    <li>롤링 리스트 2</li>
    <li>롤링 리스트 3</li>
    <li>롤링 리스트 4</li>
    <li>롤링 리스트 5</li>
    <li>롤링 리스트 6</li>
    <li>롤링 리스트 7</li>
    <li>롤링 리스트 8</li>
    <li>롤링 리스트 9</li>
    <li>롤링 리스트 10</li>
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!--제이쿼리-->
<script src="./common/js/vticker.min.js"></script> <!--vticker js-->

<script type="text/javascript">
  $('#list').vTikcer({
  	speed: 300, //넘어가는 속도
    pause: 2000, //멈춰있는 시간
    animation: 'fade', //에니메이션 효과
    mousePause: true, //마우스오버시 멈춤
    showItems: 6 //한번에 보여줄 아이템수
  })
</script>

 

점점 플러그인만 늘어가는 느낌..