Anasayfa / Web Tasarım / Html / Html’de CSS & Jquery Kullanarak Slider Oluşturma
slider

Html’de CSS & Jquery Kullanarak Slider Oluşturma

Günümüzde bir çok web sitesinin anasayfasında rastladığımız, yeni eklenen içeriklerin hızlı ve dikkat çekici şekilde görüntülenmesini sağlayan slider yapımını anlatacağım.

Sliderimızı oluşturmak için bir adet html sayfamız, slideri görselleştirmek için css dosyamız ve etkileşimi sağlamak içinse javascript dosyasına ihtiyacımız olacak. Bu dosyaları oluşturduğunuzu varsayarak direk kodlara geçiyorum.
index.html dosyası içindeki head kısmında gerekli olan tanımlamaları yapalım. Manşet haber sliderında jquery kullandığımız için jquery-2.1.4.js veya jquery-2.1.4.min.js dosyasını internetten indirip projenize eklemeyi unutmayın.

index.html head kısmının içeriği;

index.html body kısmının içeriği;

<ul id=”manset”> içerisindeki <li> sayısını arttırarak resimleri, <ul id=”sayfalama”>  içerisindeki <li> sayısınıda arttırarak  istediğiniz kadar numaralandırma ekleyebilirsiniz. Tabi birde resimlerin yer aldığı img klasörünü ve göstermek istediğiniz resimleri hazırlamanız gerekiyor.

reset.css dosyasının içeriği,

style.css dosyamızın içeriği

Son olarak javascript kodlamızı slider.js oluşturup içine bu kodları ekleyelim.

$(“ul#sayfalama>li”).click(function() bu satırdaki .click yazısını hover ile degiştirirsek mouse üzerine gelince otomatik olarak değişen bir slayta sahip olabilirsiniz. Biraz css ve javascript bilgisi ile sliderınızı kendi isteğinize göre biçimlendirip kullanabilirsiniz.

Bir sorun ile karşılaşırsanız yorum göndermeyi unutmayın.

İlginizi Çekebilir!

html nedir?

Html Dersleri 6: Form Oluşturma

Html derslerimizin altıncısı olan form oluşturma işlemleri ile devam ediyoruz. Eğer önceki dersleri takip etmek ...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir