Javascript Jquery vTicker 사용하여 상하 슬라이드 롤링하기

Jquery vTicker를 사용하여 위아래로 롤링 처리 방법입니다.

1. jquery-3.4.1.min.js 파일을 서버에 업로드합니다.

2. jquery.vticker.min.js 파일을 서버에 업로드합니다.

3. 샘플 소스 정상 작동하는지 확인을 합니다.

4. li 태그 자리를 공지사항이나 필요한 내용으로 바꿉니다.

※ 샘플 소스를 아래 첨부하였습니다.

 

아래와 같이 코딩을 하면 롤링되는 것을 확인하실 수 있습니다.

<div id="example">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
  </ul>
</div>
<script type="text/javascript" charset="utf-8" src="./jquery-3.4.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./jquery.vticker.min.js"></script>
<script>
$(function() {
  $('#example').vTicker();
});
</script>

기존에 jquery를 사용하시는 경우에 jquery.vticker.min.js 파일만 올려서 점검하시는 경우가 있을 수 있습니다.

이 때, Uncaught TypeError: a.obj.animate is not a function 에러가 발생할 수가 있습니다.

이럴때는 jquery slim 버전이어서 안되는 것입니다. 이 때는 min 버전은 인클루드 하셔야 해결이 됩니다.

Javascript Jquery vTicker 사용하여 상하 슬라이드 롤링하기

 

vticker.zip

0.03MB