<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="nguru" />
<link type="text/css" rel="stylesheet" href="slider.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="brickSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#slider").brickSlider({
maxCols:3,
linkSelector:'.link',
margin:1,
//openSpeed:0,
//closeSpeed:0,
//delayBeforeOpen:0,
//centerSpeed:0,
//scrollSpeed:0,
//autoScroll:false,
//controlButtons:false,
autoHeight:true,
//startOpened: true,
//startIndex : 0,
//currentItem: 2,
onReady: function(){
},
onOpen: function(item,link,linkIndex){
link.addClass('active').find('.hidden').fadeIn(500);
},
onClickClose: function(item,link,linkIndex){
link.find('.hidden').clearQueue().stop().fadeOut(200);
},
onClose: function(item,link,linkIndex){
link.removeClass('active');
}
});
});
</script>
<title>Sliders</title>
</head>
<body>
<div id="slider">
<div class="item" >
<div class="link rounded" >
<h2>Heading 1</h2>
<p>This is my beautiful slider design</p>
<div class="hidden">
<img src="1.png" />
</div>
</div>
<div class="link rounded" >
<h2>Heading Two</h2>
<p>This is my beautiful slider design</p>
<div class="hidden">
<img src="1.png" />
</div>
</div>
<div class="link rounded" >
<h2>Heading Three</h2>
<p>This is my beautiful slider design</p>
<div class="hidden">
<img src="1.png" />
</div>
</div>
<div class="link rounded" >
<h2>Heading Four</h2>
<p>This is my beautiful slider design</p>
<div class="hidden">
<img src="1.png" />
</div>
</div>
<div class="link rounded" >
<h2>Heading Five</h2>
<p>This is my beautiful slider design</p>
<div class="hidden">
<img src="1.png" />
</div>
</div>
<div class="link rounded" >
<h2>Heading Six</h2>
<p>This is my beautiful slider design</p>
<div class="hidden">
<img src="1.png" />
</div>
</div>
</div>
</div>
</body>
</html>
|
Download
