Mükemmel Bir Slider

Birazdan tanıtacağım slider'ın özelliği responsive, duyarlı olması. Yani boyutunu ekranın çözünürlüğüne göre otomatik ayarlıyor ve görüntüsü de gayet hoş.

Slider'ı eklemek için:

1. Yerleşim >> Gadget Ekle >> HTML/JavaScript yolunu izliyoruz ve açılan kutuya aşağıdaki kodları ekliyoruz:

<style type="text/css">
.btnt-slider {  margin: 30px auto;  max-width: 850px;  padding: 0 20px;  }
.rslides {  list-style: none outside none;  margin: 0 auto;  max-height: 400px;  max-width: 800px;    overflow: hidden;  padding: 0;  position: relative;  width: 100%; }
.rslides li {  -webkit-backface-visibility: hidden;  position: absolute; border: 5px solid #555; display: none;  left: 0;  top: 0; margin: 0; padding: 0; list-style: none; }
.rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; margin: 0; max-width: 100%; }
ul.rslides .rslides_nav {  height: 30px;  position: absolute;  text-indent: -99999px;  top: 45%;  width: 30px;  z-index: 9999;  display: none; }
ul.rslides:hover .rslides_nav {  display: block;  }
.prev {  background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/arrows_zps95b22e18.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/arrows_zps95b22e18.png") repeat scroll right 0 transparent;  float: right; right: 15px;  }
</style>
<script type="text/javascript">
/*<![CDATA[*/
  $(function() {
    $(".rslides").responsiveSlides({
      auto: true,
      speed: 500,
      timeout: 3000,
      nav: true,
      pause: true,
      prevText: "Previous",
      nextText: "Next",
      navContainer: "ul.rslides",
    });
  });
/*]]>*/</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-responsive-slider.js" type="text/javascript"></script>
<br />
<div class="btnt-slider">
<ul class="rslides">
<li><a href="http://www.webterest.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://www.webterest.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://www.webterest.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>

2. Gadget'a yukarıdaki kodları ekledikten sonra http://www.webterest.blogspot.com/ adresini kendi linkinizle değiştirin.

3. http://img-url.com/ adresini de slider'da göstermek istediğiniz resmin adresi ile değiştirin.

4. Kaydedin ve çıkın. Hepsi bu kadar. :)