I’m working on a carousel using rcarousel.http://ryrych.github.com/rcarousel/
I’m close to getting it to work right, but for some reason the last image is getting cut off. I think I read that there is an option to show only half of the final image to show what is coming next, but I can’t find anything in the code about it. I went back and read through the documentation and can’t find anything there either.
Here is a link to the page. I can paste in the rest of the code if necessary, but I think it will be easier just using firebug or web inspector because of all of the different files. http://aaronhaas.com/test/custom_step_and_visible.html
html and some css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>rcarousel - custom step and visible</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/header.css" />
<link type="text/css" rel="stylesheet" href="widget/css/rcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/projects2.css">
<style type="text/css">
#container {
width: 975px;
position: relative;
}
#carousel {
margin: 0 auto;
}
#carousel img {
border: 0;
}
#ui-carousel-next, #ui-carousel-prev {
width: 30px;
height: 127px;
background: url(img/slider/prev.png) #fff center center no-repeat;
display: block;
position: absolute;
top: 0;
z-index: 100;
}
#ui-carousel-next {
right: 0;
background-image: url(img/slider/next.png);
}
#ui-carousel-prev {
left: 0;
}
#ui-carousel-next > span, #ui-carousel-prev > span {
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="carousel">
<div class='project'>
<a href='project.php?proj_id=24'>
<img src='img/project_thumbs/box_cover3.png'>
<h2>NCIS Columbus</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=10'>
<img src='img/project_thumbs/bandofthehand.png'>
<h2>Band of the Hand</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=9'>
<img src='img/project_thumbs/wrathofthetitans.png'>
<h2>Wrath of the Titans</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=8'>
<img src='img/project_thumbs/theraidredemption.png'>
<h2>The Raid: Redemption</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=7'>
<img src='img/project_thumbs/projectx.png'>
<h2>Project X</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=6'>
<img src='img/project_thumbs/ncis.png'>
<h2>NCIS</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=6'>
<img src='img/project_thumbs/ncis.png'>
<h2>NCIS</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=6'>
<img src='img/project_thumbs/ncis.png'>
<h2>NCIS</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=6'>
<img src='img/project_thumbs/ncis.png'>
<h2>NCIS</h2>
</a>
</div> <!-- close project -->
<div class='project'>
<a href='project.php?proj_id=6'>
<img src='img/project_thumbs/ncis.png'>
<h2>NCIS</h2>
</a>
</div> <!-- close project -->
</div>
<a href="#" id="ui-carousel-next"><span>next</span></a>
<a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<script type="text/javascript" src="widget/lib/jquery-1.7.1.js"></script>
<script type="text/javascript" src="widget/lib/jquery.ui.core.js"></script>
<script type="text/javascript" src="widget/lib/jquery.ui.widget.js"></script>
<script type="text/javascript" src="widget/lib/jquery.ui.rcarousel.js"></script>
<script type="text/javascript">
jQuery(function( $ ) {
$( "#carousel" ).rcarousel({
visible: 6,
step: 1,
height:235,
width:133
});
$(*"#ui-carousel-next" )
.add( "#ui-carousel-prev" )
.hover(
function()*{
$( this ).css(*"opacity", 0.7 );
},
function()*{
$( this ).css(*"opacity", 1.0 );
}
);
});
</script
</body>
</html>
external css
.ui-carousel {
height: 300px;
margin: 0;
overflow: auto;
padding: 0;
position: relative; /*for ie7 to work e.g in html carousels*/
width: 800px
}
.ui-carousel > .wrapper {
margin: 0;
padding: 0;
width: 9999px;
}
.ui-carousel > .wrapper > * {
border: 0;
display: block;
float: left;
height: 200px;
overflow: hidden;
width: 100px;
}