17 Eki 2021 06:39 Yeni Konu Oluştur

Haberler:

Üye kayıt esnasında E-posta adresinizin doğru olduğuna ve Aktivasyon Mailinize bakmayı unutmayın.


smf css3 slider

Başlatan snrj, 02 Ağu 2014 00:00

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

*

  1. 3,115

  2. 588

  3. 1005
02 Ağu 2014 00:00 Son düzenlenme: 02 Ağu 2014 00:01 Smfci

sadece css ile yapılmış güzel bir resim slider biraz editle daha kullanışlı hale getirilebilir (banner olarak kullanabilirsiniz değişen logo olarak kullanabilirsiniz vs...)
ben normal iki örnek verecem sadece anasayfa ve üstte heryerde gözükecek şekilde

[IMG]http://i.imgur.com/YauPefL.jpg[/img]

sadece anasayfada gözüksün isteyenler
boardindex.template.php de bul ve üstüne ekle
<div id="boardindex_table">

[IMG]http://i.imgur.com/3a0Jdwg.jpg[/img]

bütün sayfalarda göstermek için
index.template.php bul ve altına ekle
echo '
</head>
<body>


kodlar
<style>
.container{
 
  width:100%;
  height:300px;
  overflow:hidden;
  border:1px solid;
  border-top-color:#856036;
  border-left-color:#5d4426;
  border-bottom-color:#856036;
  border-right-color:#5d4426;
  position:relative;

}
.photo{
  position:absolute;
  animation:round 32s infinite;
  opacity:0;
  width:100%;height:300px;
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
}

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:6s;}
img:nth-child(2){animation-delay:12s;}
img:nth-child(1){animation-delay:18s;}
</style>
<div class="container">
  <img class="photo"  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class="photo"  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
  <img class="photo"  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class="photo"  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />

</div>



resim yollarını kendinize göre düzeltin


MENU ×