2012-08-11 2 views
0

jquery를 사용하여 복제없이 연속/회전 슬라이더를 사용할 수 있습니까? 필요 조건은 마지막과 이전 슬라이드의 25 %의 절반을 첫 번째/현재 슬라이드와 함께 표시해야합니다. 그리고 사용자가 다음/prev 버튼을 클릭하면 회전해야합니다.복제하지 않고 Jquery 슬라이더

복제를 시도했지만 해상도가 낮을수록 clonnig div가 더 큰 해상도로 표시됩니다. 나는 복제 부문을 보여서는 안된다.

플러그가 있으면 알려주세요.

답변

0
<div id="MainSliderContent" style="display: table-cell;"> 
    <div class="Message"> 
     Test 1 
    </div> 
    <div class="Message"> 
     Test 2 
    </div> 
    <div class="Message"> 
     test 3 
    </div> 
    <div class="Message"> 
     Test 4 
    </div> 
</div>​ 


$(document).ready(function() { 
     //if ($('#MainSliderContent').find('div.Message').length > 1) { 
     $('#MainSliderContent').find('div.Message:not(:first)').hide(); 

     $('#MainSliderContent').live({ 
      mouseenter: function() { 
       $(this).addClass('Hover'); 
      }, 
      mouseleave: function() { 
       $(this).removeClass('Hover'); 
      } 
     }); 

     setInterval(function() { 
      if (!$('#MainSliderContent').hasClass('Hover')) { 
       var $messageObj = $('#MainSliderContent').find('div.Message:visible'); 
       $messageObj.slideUp('slow').next('div.Message').slideDown('slow'); 
       $('#MainSliderContent').find('div.Message:last').after($messageObj); 
      } 
     }, 1 * 1000); 
     //} 
    });​ 

: http://jsfiddle.net/nanoquantumtech/BJ6R7/

+0

1 * 1000이 1 초 동안 너는 그것을 바꿀 수있어. – Thulasiram

관련 문제