JCarousel을 사용하여 높이 변경

유연한 예가 수정되었습니다. 그러나 이미지가 잘리는 높이를 변경했습니다. 왜 이런 일이 일어날 지 모르겠습니다. 아무도 이것으로 나를 도울 수 있습니까? 여기JCarousel을 사용하여 높이 변경

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<head> 
<title>jCarousel Examples</title> 
<link href="../style.css" rel="stylesheet" type="text/css" /> 
<!-- 
    jQuery library 
--> 
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script> 
<!-- 
    jCarousel library 
--> 
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script> 
<!-- 
    jCarousel skin stylesheet 
--> 
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" /> 

<style type="text/css"> 

/** 
* Overwrite for having a carousel with dynamic width. 
*/ 
.jcarousel-skin-tango .jcarousel-container-horizontal { 
    width: 85%; 
} 

.jcarousel-skin-tango .jcarousel-clip-horizontal { 
    width: 100%; 
    height:300px; 

} 

</style> 

<script type="text/javascript"> 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     visible: 4 
    }); 
}); 

</script> 

</head> 
<body> 
<div id="wrap"> 
    <h1>jCarousel</h1> 
    <h2>Riding carousels with jQuery</h2> 

    <h3>Flexible carousel</h3> 
    <p> 
    This example shows a carousel with flexible item width. In this case, always 
     4 items are visible (resize the browser window to see what happens). 
    </p> 

    <ul id="mycarousel" class="jcarousel-skin-tango"> 
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="175" height="375" /></li> 
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="175" height="375" /></li> 
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="175" height="375" alt="" /></li> 
    </ul> 

</div> 
</body> 
</html>

이 일어나는 것이다 : 당신이 볼 수 있듯이

enter image description here

이 이미지를 잘라 얻을.

출처

2012-08-17 user1513192

원하는 높이와 너비로 LI를 설정하십시오. jcoursel에이 값이 필요합니다. 그렇지 않으면 올바르게 순환되지 않습니다.

#mycarousel li { height: 375px; width: 175px;}

출처

2012-08-17 18:12:09 chadpeppers

와우 ,,,,,,,,,,,,, – user1513192

나를 위해 작동하지 않습니다. – Volatil3

답변

관련 문제