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:

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>

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

Alper 30/12/2020

Hocam, bulletlar resmin üzerine geliyor nasıl çözerim?

yönetici 01/01/2021

Alper, boş bir html sayfada dene güzel çalışıyormu. klasör isimleri dosya isimleri aynı olsun. Bir div elementi içine eklediysen div elementin büyüklüğü kurtarıyormu diye bak. sitede diğer slider'ları dene. Arama kısmında ara bul.

Muhammed Emin DURSUN 23/02/2021

Bullet ların gözükmemesinin nedeni style.css içinde dosya yolunun doğru olmamasından kaynaklanıyor. Klasör isimlerini değiştirebilirsiniz.

Cemile ÖZMEN 05/06/2021

Vermiş olduğunuz bilgiler için çok teşekkür ederim uyguladım ben bu resimlerin sola ve sağa her zaman dayalı olmasını istiyorum ekrana göre otomatik uzatmasını kodlarıma yazdım ama ekran boyu değişince otomatik uzatma yapmıyor ne yapabiliirim ?

yönetici 08/06/2021

Cemile, bunun için responsive slider yüklemelisin yukarda ki yorumlarda mavi renkte konuya tıkla.

deniz sen 04/12/2021

hocam slider içinde bir öğeyi sabit bırakıp diğerlerini onun arkasından akıtabilirmiyiz.

yönetici 04/12/2021

Slider kodları hazır olarak aldığımızdan, kodları yazan öyle bir özellik yapmamış.

Timur Aslan 05/12/2021

Hocam merhaba arka plana slider ekleyebilirmiyiz ?

yönetici 06/12/2021

Slider, video ekleyebilirsin.

Bilal Enes Arı 31/12/2022

Hocam benim sadece javascript olayı çalışmıyo çalıştığım dosyanın uzantısı .php o yüzden olabilir mi?

yönetici 03/01/2023

uzantı php veya html farketmez çalışır. kendi sayfan yerine boş bir html dosya yap orada deneyerek kendi sitene eklersin.

İbrahim ibsa 29/09/2023

Merhaba hocam Slider gölge efekti vermek için ne yapmalıyız

yönetici 03/10/2023

div id="slider" kısmına css ile gölge ver

Emin 19/10/2023

Kodların hepsini düzgün yaptım ama slider çalışmıyor

yönetici 28/10/2023

Emin, çalışan yukardan indir incele

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET