smoothSlider

By

FullScreen
Websayfanızda tam ekran slayt resimler kullanabilmeniz için geliştirilmiş bir jQuery uygulamasıi. Eklentinin özeli bir  adı yok.   Dynamic Drive sitesi tarafından hazırlanmış olan bu uygulama sayesinde tam ekran slayt resimler kullanabilirsiniz.

Sırasıyla  slayt olarak değişecek resimleri teker teker json dosyasından çekiyor ve farklı animasyonlarla websayfasında ziyaretçilere  hoş bir görüntü sağlıyor. Resimler arası slayt geçiş esnasında resimlerin büyüyerek, küçülerek, sola-sağa-yukarı-aşağı kayarak yada  resimden resime geçişi direk sağlayabilirsiniz.  Resimler arası geçiş esnasında resimlerin solarak kaybolmasıda çok güzel bir görünüm ortaya koyuyor. Css kodlarda resimlerin görüntülendiği çerçeveyi küçültüp farklı boyutlarda slayt örnekleri de hazırlayabilirsiniz.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js ve css dosya adresleri.



Css :

.slideshowwrapper{ /* dimensions of outermost slideshow container */
 width: 80%;
 height: 600px;
 position: relative;
 overflow: hidden;
 }

JavaScript :

playlist.json 

{
 "playlist": [
 {
 "url": "img/img0.jpg",
 "caption": "A bird perching on a twig."
 },
 {
 "url": "img/img1.jpg",
 "caption": "Lions lounging on the grass."
 },
 {
 "url": "img/img2.jpg",
 "caption": "Seagulls gazing collectively."
 },
 {
 "url": "img/img3.jpg",
 "caption": "Snail on a table."
 },
 {
 "url": "img/img4.jpg",
 "caption": "A lone wolf looks on..."
 }
 ],
"hold_time":2,
 "loops":2,
 "transition_time":1
}
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Anasayfa açıklaması.


1 Comment
  1. ramazan 5 years ago
    Reply

    soothslider mı kurmak gerekiyor

Leave a Comment

Your email address will not be published.

You may also like

Trend