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

Mahmut Özdemir 29/10/2019

merhaba sizin verdiğiniz .css ve slider.js dosyalarını kullanarak kendim farklı resim ekleme istedim ama olmadı acaba nasıl kullanabilirim. Değiştirmem gereken bir kısım mı var anlamadım. Bide ben bunu bootstrap ile tasarladığım bir sitede kullanmak istiyorum acaba olur mu?

yönetici 29/10/2019

Mahmut, hazır çalışan dosyayı indir, Resimleri aynı klasöre at, resimlerin formatları dikkat et yazarken .jpg, .jpeg, .png, .gif bu slider'ı her yere uyarlayabilirsin.

Meryem 25/11/2019

Peki resimlerin boyutunu nasıl ayarlayacağız?

yönetici 26/11/2019

Meryem, photoshop veya eşdeğeri bedava olan GİMP programlarla resimlerin boyutunu ayarlayabilirsiniz.

Rabia al 23/12/2019

Meryem, sliderin programı var oradan ayarlayabilirsin

muhammed emin 25/01/2020

siteme ekledim ama bullet gözükmüyor

yönetici 27/01/2020

Muhammed, bu kodları ilk çalıştırtığımda bullet'ler gözükmemişti. Sanırım hatırladığım dosya isimlerini değiştirmeyeceksin. Download kısmından çalışan kod örneğini o şekilde direk aktar.

ömer kara 02/03/2020

merhebalar. Geçiş süresini js nin hangi satırında belirliyoruz. Ayrıca geçiş efektelerinin random değilde sadece bir adetini kullanmak istiyorum mümkün mü?

yönetici 05/03/2020

Ömer, slider.js dosyasını aç var sliderOptions Nesnesinin, aşağıdaki kodun değerini değiştir.

pauseTime: 2600,

geçiş efectleri değişmiyor. şu konuyada bak.

Gökhan 03/04/2020

Bilgisayardan sayfayı açınca slider gayet iyi çalışıyor. Ama telefonunda resimler aynı boyutta kalıyor ve sayfayı kaplıyor. Bunu nasıl çözebilirim?

yönetici 05/04/2020

Gökhan, mobilde düzgün çalışması için Şu konuya bak. HTML Responsive Slider Ekle

Mustafa 25/04/2020

Peki mobil sayfada da gözükmesi için ne yapmamız lazım bu kodları direk kopyala yapıştır yapınca mobile uyumlu olmuyor.

yönetici 26/04/2020

Mustafa, üst mesajda cevaplanmıştı.

Cenk Genç 16/05/2020

Masaüstünde test ettiğinde sorunsuz çalışıyor. Ama hostinge atıyorsun dosyayı, 2. fotoğrafta kayma yapmaya başlıyor. Header alanının üstüne biniyor. Anlıyamadım bir türlü.

yönetici 17/05/2020

Cenk, Basit html kodları ile bu sliderı ekle öyle bir dene sorununu o şekilde bulabilirsin. Birde bu sliderı dene HTML Responsive Slider Ekle
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

981

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