Next Prev

iCarousel

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn't matter too much here because all those kind of applications share always the same idea: Rotating.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8"><head>
<base href="http://www.ajaxdaddy.com/web20/mootools/icarousel/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
		
    <link href="css/reset-fonts.css" rel="stylesheet" type="text/css"/>
		<link href="css/icarousel1.css" rel="stylesheet" type="text/css"/>
    <link href="css/icarousel2.css" rel="stylesheet" type="text/css"/>
		<script src="javascript/mootools.js" type="text/javascript"/>
		<script type="text/javascript" src="javascript/shCore.js"></script>
		<script type="text/javascript" src="javascript/iCarousel.js"></script>
</head><body>
    <center>
      <h3>V. Vertical text scroller</h3>
      <div id="example_5">
      	<div id="example_5_content">
      		<div class="example_5_item">
      			<h4>What is Lorem Ipsum?</h4>
      			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>
      			<p><a href="http://www.lipsum.com">more information</a></p>
      		</div>
      		<div class="example_5_item">
      			<h4>Where does it came from?</h4>
      			<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked...</p>
      			<p><a href="http://www.lipsum.com">more information</a></p>
      		</div>
      		<div class="example_5_item">
      			<h4>Why do we use it?</h4>
      			<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',...</p>
      			<p><a href="http://www.lipsum.com">more information</a></p>
      		</div>
      		<div class="example_5_item">
      			<h4>Where can I get some?</h4>
      			<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure...</p>
      			<p><a href="http://www.lipsum.com">more information</a></p>
      		</div>
      	</div>
      	<div id="example_5_frame">
      		<img id="example_5_previous" src="images/ex4_previous.gif" alt="move previous" />
      		<img id="example_5_next" src="images/ex4_next.gif" alt="move next" />
      	</div>
      </div>
    
    
			<h3>Vertical carousel - images scroller</h3>
			<div id="example_4">
				<div style="top: -860px;" id="example_4_content">
					<div class="example_4_item">
						<a href="#"><img src="images/1.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/2.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/3.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/4.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/5.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/6.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/7.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/8.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/9.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/A.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/B.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/C.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/D.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/E.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/F.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/G.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/H.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/I.jpg" alt="flower 2"></a>
					</div>
					<div class="example_4_item">
						<a href="#"><img src="images/J.jpg" alt="flower 1"></a>
						<a href="#"><img src="images/K.jpg" alt="flower 2"></a>
					</div>
        </div>
				<div id="example_4_frame">
					<img id="example_4_previous" src="images/ex4_previous.gif" alt="move previous">
					<img id="example_4_next" src="images/ex4_next.gif" alt="move next">
				</div>
			</div>
    </center>
      		<script type="text/javascript">
	
window.addEvent("domready", function() {
	

	new iCarousel("example_4_content", {
		idPrevious: "example_4_previous",
		idNext: "example_4_next",
		idToggle: "undefined",
		item: {
			klass: "example_4_item",
			size: 86
		},
		animation: {
			direction: "top",
			duration: 250,
			amount: 2
		}
	});
});

window.addEvent("domready", function() {  
    new iCarousel("example_5_content", {  
        idPrevious: "example_5_previous",  
        idNext: "example_5_next",  
        idToggle: "undefined",  
        item: {  
            klass: "example_5_item",  
            size: 172  
        },  
        animation: {  
            direction: "top",  
            duration: 1000,  
            amount: 1  
        }  
    });  
});  
		</script>
    
    
    
	</body></html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Miroslav

2007-10-04 10:19:56

Becouse IE is ... :)

Hung

2007-09-30 07:03:53

why don't use with IE ?

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

iCarousel

Comment on this example