Bs Pazar - Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (2)

Bs Pazar - Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (2)

Baba Sayfa
Röportajlar
HTML Kodları
=> Sitene Aşk Ölçer Ekle
=> Hangi Gün Doğdun Kodu
=> JavaScript
=> Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (5)
=> Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (4)
=> Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi
=> Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (3)
=> Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (2)
Büyüteç Nedir ?
İlginç İçerikler
Makaleler
Foto Galeri
Video Galeri
Hobi
Şansımı Denemek İstiyorum

Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (2)

Bedava-Sitem Forumunda dolaşırken tesadüfen İbrahim Gün arkadaşımızın paylaştığı bir

başlıkda 7 Adet Slider kodu bulduk. Bizde bu kodları bs-pazar takipçilerinin işine yarıyacağını

düşünerek paylaşmak istedik. İbrahim Gün'e katkılarından dolayı teşekkürler.

DİP NOT: İnternet sitemizden kaynaklanan hatalardan dolayı görseller büyük gözükmektedir.

Kodu Aşağıdaki Kutudan Kopyalayıp Alabilirsiniz.

<style type="text/css">  /*  * jQuery FlexSlider v2.0  * http://www.woothemes.com/flexslider/  *  * Copyright 2012 WooThemes  * Free to use under the GPLv2 license.  * http://www.gnu.org/licenses/gpl-2.0.html  *  * Contributing author: Tyler Smith (@mbmufffin)  */  /* Browser Resets */  .flex-container a:active,  .flexslider a:active,  .flex-container a:focus,  .flexslider a:focus{  outline:none;  }  .slides,  .flex-control-nav,  .flex-direction-nav{  margin:0;  padding:0;  list-style:none;  }  /* FlexSlider Necessary Styles  *********************************/  .flexslider{  margin:0;  padding:0;  }  .flexslider .slides > li{  display:none;  -webkit-backface-visibility:hidden;  -moz-backface-visibility:hidden;  -ms-backface-visibility:hidden;  -o-backface-visibility:hidden;  backface-visibility:hidden;  }  /* Hide the slides before the JS is loaded. Avoids image jumping */  .flexslider .slides img{  width:100%;  display:block;  }  .flex-pauseplay span{  text-transform:capitalize;  }  /* Clearfix for the .slides element */  .flexslider a.intro {  bottom:0;  color:rgba(0, 0, 0, 0.1);  font-size:14px;  position:absolute;  right:0;  text-decoration:none;  z-index:99999;  }  .slides:after{  content:".";  display:block;  clear:both;  visibility:hidden;  line-height:0;  height:0;  }  html[xmlns] .slides{  display:block;  }  * html .slides{  height:1%;  }  /* No JavaScript Fallback */  /* If you are not using another script, such as Modernizr, make sure you  * include js that eliminates this class on page load */  .no-js .slides > li:first-child{  display:block;  }  /* FlexSlider Default Theme  *********************************/  .flexslider{  margin:0 0 60px;  background:#fff;  border:4px solid #fff;  position:relative;  -webkit-border-radius:4px;  -moz-border-radius:4px;  border-radius:4px;  -webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);  -moz-box-shadow:0 1px 4px rgba(0,0,0,.2);  box-shadow:0 1px 4px rgba(0,0,0,.2);  zoom:1;  }  .flex-viewport{  max-height:2000px;  -webkit-transition:all 1s ease;  -moz-transition:all 1s ease;  -o-transition:all 1s ease;  transition:all 1s ease;  }  .loading .flex-viewport{  max-height:300px;  }  .flexslider .slides{  zoom:1;  }  .carousel li{  margin-right:5px;  }  /* Direction Nav */  .flexslider li {  border: 0 none !important;  padding: 0 !important;  text-indent: 0 !important;  }  .flex-direction-nav a{  width:30px;  height:30px;  margin:-20px 0 0;  display:block;  background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;  position:absolute;  top:50%;  cursor:pointer;  text-indent:-9999px;  opacity:0;  -webkit-transition:all .3s ease;  -moz-transition:all .3s ease;  -o-transition:all .3s ease;  transition:all .3s ease;  }  .flex-direction-nav .flex-next{  background-position:100% 0;  right:-36px;  }  .flex-direction-nav .flex-prev{  left:-36px;  }  .flexslider:hover .flex-next{  opacity:0.8;  right:5px;  }  .flexslider:hover .flex-prev{  opacity:0.8;  left:5px;  }  .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{  opacity:1;  }  .flex-direction-nav .disabled{  opacity:.3!important;  filter:alpha(opacity=30);  cursor:default;  }  /* Control Nav */  .flex-control-nav{  width:100%;  position:absolute;  bottom:-40px;  text-align:center;  }  .flex-control-nav li{  margin:0 6px;  display:inline-block;  zoom:1;  *display:inline;  }  .flex-control-paging li a{  width:11px;  height:11px;  display:block;  background:#666;  background:rgba(0,0,0,0.5);  cursor:pointer;  text-indent:-9999px;  -webkit-border-radius:20px;  -moz-border-radius:20px;  border-radius:20px;  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);  box-shadow:inset 0 0 3px rgba(0,0,0,0.3);  }  .flex-control-paging li a:hover{  background:#333;  background:rgba(0,0,0,0.7);  }  .flex-control-paging li a.flex-active{  background:#000;  background:rgba(0,0,0,0.9);  cursor:default;  }  .flex-control-thumbs{  margin:5px 0 0;  position:static;  overflow:hidden;  }  .flex-control-thumbs li{  width:25%;  float:left;  margin:0;  }  .flex-control-thumbs img{  width:100%;  display:block;  opacity:.7;  cursor:pointer;  }  .flex-control-thumbs img:hover{  opacity:1;  }  .flex-control-thumbs .active{  opacity:1;  cursor:default;  }  </style> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script> <script type="text/javascript"> 
 $(document).ready(function(){    
$(window).load(function() { 
  $('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: false, 
    itemWidth: 210, 
    itemMargin: 0, 
    minItems: 1, 
    maxItems: 4 
  }); 
}); 
}); 
</script>  <div class="flexslider">  <ul class="slides">      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" alt="" /></li>      <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" alt="" /></li>  </ul>  </div>

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol