Help with using rcarousel

**aaron4osu** · Jun 21, 2012 10:59

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

HTML Code:

<!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

HTML Code:

.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;	
}

**aaron4osu** · Jun 21, 2012 14:29

Never Mind I figured it out. Another css file was changing one of the values.

**Riza** · Sep 17, 2012 01:01

Hi, I am also having the same problem. Please let me know know the solution of this problem. My rcarousal is showing the last image half. you can also email me at khan.tanoli@gmail.com. thankyou.

User Tag List

Thread: Help with using rcarousel

Thread Tools

Display

Help with using rcarousel

Have the same problem

Bookmarks

Bookmarks

Posting Permissions