Html, Css ve JQuery Kodları ile Slider Yapımı

Çoğu zaman web sayfalarımıza slider eklemek istediğimizde hazır eklentiler bulmaya çalışırız. Aslında bu konuda çok güzel eklentiler olsada birçoğu bir slider için gereğinden büyük boyutta dosyalar içeriyor. İster istemez bunlar da web sayfanızın açılış hızını olumsuz yönde etkiliyor. Bunun önüne geçmek adına bu yazımda Html, Css ve Jquery kodlarıyla slider yapımı konusunu anlatacağım.

Slider yapımı düşünüldüğü kadar zor bir hadise değildir. Yazacağımız kodları kendi bilgisayarınızda uygulayıp bazı yerlerini değiştirerek tarayıcıdaki değişimleri incelemeye çalışın. Böylece kodları çok daha hızlı kavramış olursunuz. 

Kodları mümkün olabildiğince geniş tutacağım.

Yani, kimisi slider kullanırken üzerinde caption dediğimiz yazıları kullanmak isterken kimisi de kullanmak istemez. Yada sliderın altındaki dot dediğimiz yuvarlak noktaları.

Bu yüzden kullanmak isteyenler olur diye kodların içerisinde tüm bunları bulundurdum. Bu kısımları çıkarmak isteyenler ilgili Html, Css ve Jquery kodlarını çıkararak projelerine ekleyebilirler.

Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.  

html-css-jquery-ile-slider-yapimi

 Not :  Resimlerin boyutunu 800×380 px olarak ayarladım.

Gördüğünüz gibi bir sliderda olması gereken tüm özellikler bulunuyor. 

Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.

Son olarak bir slider da olabilecek alanları resim üzerinde göstermek istiyorum.

slider-yapimi

 ⇒  Sliderın sağında ve solunda bulunan ok işaretleriyle sliderın resimleri arasında geçişleri sağlayabiliriz.

 ⇒  Sliderın altında bulunan yuvarlaklar ile sliderın resimleri arasında geçişleri sağlayabiliriz.

 ⇒  Resmin üzerinde bulunan Caption alanıyla da resim hakkında kısa bilgiler verebiliriz.

Konuyu daha fazla uzatmadan slider kodlarına geçelim. 

Slider Yapımı Html Kodları 

 ⇒  img etiketlerinin src niteliklerine kullanmak istediğiniz resimlerin Url‘lerini yazmalısınız.

Slider Yapımı Css Kodları 

Slider Yapımı Jquery Kodları 

Jquery kodları içerisinde son kısımda bulunan kodları yorum satırları haline getirdim. Bu kodları aktif ederseniz sliderda bulunan resimler otomatik olarak belli bir saniyede kendiliğinden değişecektir.

Örneğin resimlerin 3 saniyede bir değişmesini istiyorsanız 3000 olarak yazmalısınız. Bu kısmı da kullanmak isteyen olur diye eklemek istedim.

Html, Css ve Jquery kodları yazarak sliderların yapımı bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Responsive Menü Yapımı

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link