Code:
<--!JavaSrcipt-->
<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function($){
$(".slider").diyslider({
width: "690px", // width of the slider
height: "200px", // height of the slider
display: 3, // number of slides you want it to display at once
loop: false // disable looping on slides
}); // this is all you need!
// use buttons to change slide
$("#go-left").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "forth");
});
});
</script>
<!--HTML-->
<div class="items slider">
<div>
<div class="item_box left">
<h4>1</h4>
<p>Principal</p>
</div>
<div class="item_box left">
<h4>2</h4>
<p>Partner</p>
</div>
<div class="item_box left">
<h4>3</h4>
<p>Director</p>
</div>
<div class="item_box left">
<h4>4</h4>
<p>Principal</p>
</div>
<div class="item_box left">
<h4>5</h4>
<p>Partner</p>
</div>
<div class="item_box left">
<h4>5</h4>
<p>Director</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer_container">
<a class="prev" id="go-left"><</a>
<span class="nav_title"> | </span>
<a class="next" id="go-right">></a>
</div>
<!--CSS-->
body {
margin: 20px;
padding: 0;
}
.slider {
background-color: #fff;
height: 200px !important;
margin-bottom: 20px;
overflow:hidden;
}
.slider > div > div {
background: #ccc;
margin-right: 20px;
}
.slider > div >div {display:block;height:200px}
.slider > div > div:nth-child(even) {
border-color: grey;
}
.footer_container{cursor:pointer;}
U cemu je problem sa ovim primerom...
