vTicker 활용한 롤링배너 사용하기

vticker를 활용한 배너 롤링

js 소스
$(function(){
      $('#rollingBanner').vTicker();
      /* $('#rollingBanner').vTicker({
           speed: 700,
           pause: 4000,
           animation: 'fade',
           mousePause: false,
           showItems: 1
       }); */
       
      // 다음배너로 이동 next
      $('#next').click(function() {
         $('#rollingBanner').vTicker('next', {animate:true});
      });        
      $('#next').click(function() {
         $('#rollingBanner').vTicker('next', {animate:false});
      });        
      
      // 이전배너로 이동 prev
      $('#prev').click(function() {
         $('#rollingBanner').vTicker('prev', {animate:true});
      });
      
      $('#prev').click(function() {
         $('#rollingBanner').vTicker('prev', {animate:false});
      });
   });

 

html 소스
<div class="row mb-2">
                      <div class="col-sm-12">
                         <div class="card">
                            <div class="card-body" >
                               <div class="col-sm-12" id="rollingBanner">
                               <!-- <ul class="mb-5">
                                  <li><h5>배너1</h5></li>
                                  <li><h5>배너2</h5></li>
                                  <li><h5>배너3</h5></li>
                                  <li><h5>배너4</h5></li>
                               </ul>
                               <a href="#" class="bx bx-caret-up" style="float: right;"></a><br>
                               <a href="#" class="bx bx-caret-down" style="float: right;"></a> -->
                                  <ul class="mb-4">
                                     <li><h5>배너1</h5></li>
                                     <li><h5>배너2</h5></li>
                                     <li><h5>배너3</h5></li>
                                     <li><h5>배너4</h5></li>
                                  </ul>
                                  <div class="btnBox">
                                     <span class="nextBtn">
                                        <a href="#" class="bx bx-caret-down" id="next" style="float: right; margin-top: 5px;"></a>
                                     </span>
                                     <span class="prevBtn">
                                        <a href="#" class="bx bx-caret-up" id="prev" style="float: right; margin-top: 5px;"></a>
                                     </span>
                                  </div>
                               </div>
                            </div>
                         </div>
                      </div>
                   </div>

 

실행결과

 

버튼 클릭시 실행결과