SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with using rcarousel

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

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never Mind I figured it out. Another css file was changing one of the values.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Have the same problem

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •