Setup

gholme4 edited this page Sep 1, 2012 · 5 revisions
Clone this wiki locally

Setup instructions


Basic setup

This example illustrates the most basic way to initialize the plugin along with the necessary HTML mark-up:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta charset="UTF-8">
<link href="myCarousel/style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="myCarousel/myCarousel-min.js"></script>
<script>
$(function () {
	$("#my-carousel").myCarousel();
});


</script>
</head>

<body>
    <ul id="my-carousel">
    	<li><a href="#"><img src="images/1.jpeg" /></a></li>
    	<li><a href="#"><img src="images/2.jpeg" /></a></li>
        <li><a href="#"><img src="images/3.jpeg" /></a></li>
        <li><a href="#"><img src="images/4.jpeg" /></a></li>
        <li><a href="#"><img src="images/5.jpeg" /></a></li>
        <li><a href="#"><img src="images/6.jpeg" /></a></li>
        <li><a href="#"><img src="images/7.jpeg" /></a></li>
        <li><a href="#"><img src="images/8.jpeg" /></a></li>
        
    </ul>
    
    
</body>
</html>

Customizing options

This example illustrates how to customize all available plugin options:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<meta charset="UTF-8">
<link href="myCarousel/style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="myCarousel/myCarousel-min.js"></script>
<script>
$(function () {
	$("#my-carousel").myCarousel({
		numberVisibleItems:   '3',
		animationSpeed: 1000,
		carouselSpeed: 2500,
		automaticPlay: true,
		pauseOnHover: true,
		easing: "easeOutBounce"	
	});
});


</script>
</head>

<body>
    <ul id="my-carousel">
    	<li><a href="#"><img src="images/1.jpeg" /></a></li>
    	<li><a href="#"><img src="images/2.jpeg" /></a></li>
        <li><a href="#"><img src="images/3.jpeg" /></a></li>
        <li><a href="#"><img src="images/4.jpeg" /></a></li>
        <li><a href="#"><img src="images/5.jpeg" /></a></li>
        <li><a href="#"><img src="images/6.jpeg" /></a></li>
        <li><a href="#"><img src="images/7.jpeg" /></a></li>
        <li><a href="#"><img src="images/8.jpeg" /></a></li>
        
    </ul>
    
    
</body>
</html>