Jcarousel basic, 반응 형이되도록

Question

jcarousel 슬라이더가 기본 버전 (이미지 디스플레이가 하나뿐입니다)에 있습니다. 미디어 크기를 조정할 수없는 jcarousel 슬라이더가 있습니다. 여기

는 HTML 코드를 여기

<div id="mycarousel"> 
<div class="wrapper"> 


<div class="jcarousel-wrapper"> 
<div class="jcarousel"> 
<ul> 
<li><img src="img/macu/slide1.png" width="700" height="500" alt=""></li> 


<li><img src="img/macu/slide5.png" width="700" height="500" alt=""></li> 

</ul> 
/div> 

<a href="#" class="jcarousel-control-prev"></a> 
<a href="#" class="jcarousel-control-next"></a> 

<!-- 
<a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
<a href="#" class="jcarousel-control-next">&rsaquo;</a> 
--> 
<!-- <p class="jcarousel-pagination"> --> 
</p> 
</div> 
</div> 
</div> 

내 CSS를 여기

@media screen and (max-width:545px){ 
//body {background:orange;} 
#content { 
width:43%; 
height:auto; 
} 

#media,#vignette { 
width:auto; 
height:auto; 

} 
#menu { 
width:32%; 
font-size:80%; 
} 

.jcarousel{ 
width:22%; 
//font-size:80%; 
} 

} 

이

(function($) { 
$(function() { 
    $('.jcarousel').jcarousel(); 







    $('.jcarousel-control-prev') 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '-=1' 
     }); 

    $('.jcarousel-control-next') 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '+=1' 
     }); 

    $('.jcarousel-pagination') 
     .on('jcarouselpagination:active', 'a', function() { 
      $(this).addClass('active'); 
     }) 
     .on('jcarouselpagination:inactive', 'a', function() { 
      $(this).removeClass('active'); 
     }) 
     .jcarouselPagination(); 
}); 





})(jQuery); 

내가 JS에서 아무것도 변경해야 수행 JS입니다입니까? 나는 거기에 반응 jcarousel가 있지만,이 예제는 반응 회전 목마를 구현하는 방법을 보여줍니다 동시에 3 개 사진 ... http://sorgalla.com/jcarousel/examples/responsive/

감사합니다 당신에게 :)

Answer 1

응답 회전 목마

을 보여 알아보십시오. 브라우저 창 크기를 조정하여 효과를 확인하십시오. http://sorgalla.com/jcarousel/examples/responsive/

Answer 2

컨테이너 크기에 따라 다른 수의 항목을 표시 할 수도 있습니다.

$('.jcarousel') 
.on('jcarousel:create jcarousel:reload', function() { 
    var element = $(this), 
     width = element.innerWidth(); 

    if (width > 900) { 
     width = width/3; 
    } else if (width > 600) { 
     width = width/2; 
    } 

    element.jcarousel('items').css('width', width + 'px'); 
}) 
.jcarousel({ 
    // Your configurations options 
}); 

당신이 3 개 이상 사진을 보여 싶다면 당신은 폭/4

에 대한 변경