Jumat, 15 Agustus 2014
Tag :// Jquery
Hai sahabat programmer, kali ini saya akan memberikan ilmu mengenai yg namanya jquery carousel
ada yg tau jquery carousel itu seperti apa?
jquery carousel itu gambar yang slide gitu loh tapi slide nya berbentuk horizontal seperti pada gambar di bawah ini :
nah seperti itu sahabat blogger, mau tau bagaimana scriptnya?
ini script nya gan ikuti saya
buat file html, masukkan script dibawah ini
<!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="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="tinycarousel.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.tinycarousel.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#slider1').tinycarousel();
});
</script>
</head>
<body>
<div id="slider1">
<a class="buttons prev" href="#"><</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" /></li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">></a>
</div>
</body>
</html>
sekarang buat css tinycarousel nya yah
.css
/* Tiny Carousel */
#slider1 { height: 120px; margin: 1px 0 0; margin-top:3px; overflow:hidden; position: relative; padding-left:50px; padding-right:50px; }
#slider1 .viewport { height: 400px; overflow: hidden; position: relative; }
#slider1 .buttons {
background: #d8d4d1;
border-radius: 35px;
display: block;
position: absolute;
top: 50%;
left: 0;
width: 35px;
height: 35px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
}
#slider1 .next {
right: 0;
left: auto;
top: 50%;
}
#slider1 .buttons:hover{
color: #C01313;
background: #fff;
}
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 400px; margin-right:60px;}
nah untuk jquery.lates.min.js dan jquery.tinycarousel nya bisa download di web jquery yah?
semoga bermanfaat yah sahabat bloger, kawan programmer :D
See you in the next article
