Her geçen gün yeni bir jQuery Slider çıkıyor güzel olanları hep ücretli görüyoruz ancak bu seferki ücretli değil ücretsiz hemde güzel. Fotoğrafta gördüğünüz gibi ancak sitesinden slayt şeklini değiştirebiliyorsunuz ve bir çok ayar değiştirebilirsiniz.
Rhinoslider: jQuery Slider
Dosyaları hem inceleyelim hemde nasıl kullanabiliriz inceleyelim.
Alttaki CSS ve 4 Javascript scriptlerini head tagımızın içerisine ekliyoruz. Alttaki şekildeki gibi;
CSS Dosyası
<link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
JavaScript dosyaları
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').rhinoslider();
});
</script>
Head tagı içerisindeki CSS kodumuz.
<style type="text/css">
#slider {
width:600px;
height:250px;
/*IE bugfix*/
padding:0;
margin:0;}
</style>
Head tagı içerisinede kodumuzu ekledik ve şimdi body kısmına geldik. Body yani sitemizin içeriğinin göründüğü kısım.
<div id="page"> <ul id="slider"> <li><img src="img/slider/01.jpg" alt="" /></li> <li><img src="img/slider/02.jpg" alt="" /></li> <li><img src="img/slider/03.jpg" alt="" /></li> <li><img src="img/slider/04.jpg" alt="" /></li> <li><img src="img/slider/05.jpg" alt="" /></li> </ul> </div>
Dosyayı indirme linki altta ancak indirmeden önce sitesinide inceleyebilirsiniz dediğim gibi oradan bir çok ayar değiştirebiliyorsunuz.
