HTML Slider Ekle

Slider, Kayan anlamına gelmektedir. Web sitelerinde yeni gelen ürünleri, reklamları, bir kampanya duyurusunu vb. olayları site ziyaretcilerine suna bilmek ve çeşitli efektlerle bu olayı zenginleştirerek, otomatik veya manuel geçişler yapılmasını sağlayan görsel bir uygulamadır.

Slider'ları her türden web sitesinde kullanılabilir, ancak en yaygın olarak iş siteleri veya ticaret web sitelerinde kullanılırlar. Slider kullanmanın açık bir avantajı, web sitesi sahiplerinin tüm önemli içeriği, ana içeriğinden önce sayfanın üst kısmında görsel olarak güzel ve etkileşimli bir slayt gösterisine yerleştirebilmeleridir. Bu, kullanıcıların vurguları hızlı bir şekilde görmesine sebep olur.

Slider önceden tanımlanmış zaman aralığında slaytları kaydırarak, kullanıcı girişi olmadan otomatik olarak slayt gösterileri çalıştırabilir. Slider, sonraki veya önceki slaytları görüntülemek için tıklama veya hızlıca kaydırma gibi kullanıcı etkileşimlerine de yanıt verebilir. Ayrıca, slider, kullanıcıların sliderlardaki belirli bir slaydı görüntülemek için tıklayabilecekleri düğmeleri veya küçük resimleri de olabilir.

ÖRNEK:

önizleme buton

Sliderı HTML sayfamıza eklemek için <head></head> etiketleri arasına js ve css dosyalarını yükleyin.

<head>
<link rel="stylesheet" href="css/style.css">

<script src="js/slider-min.js" type="text/javascript">
</script>	
</head>	

Web sayfasına aşağıdaki gibi bir dizi resim ekleyin.

<div id="slider">
<a href="#"><img src="resim/1.jpg" alt="Örümcek Adam Filmi" /></a>
<a href="#"><img src="resim/2.jpg"/></a>
<a href="#"><img src="resim/3.jpg"/></a>
<a href="#"><img src="resim/4.jpg"/></a>
<a href="#"><img src="resim/5.jpg"/></a>
</div>

Sliderda resimlerin üstünde bilgilendirici yazı isterseniz "alt" etiketini belirtin.

Resimleriniz aynı boyutta olmalı.

Hazırladığınız resimlerin boyutunu style bölümünde mutlaka gösterin. <head></head> etiketlerin arasına aşağıdaki kodu ekleyin.

<style>
#slider {
    width:700px;
    height:306px;
    }	
</style>
download buton

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3686

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.