Merhaba arkadaşlar, bu yazımda sizlere JQuery ile slider yani kayan içerik alanı yapmayı anlatacağım. Daha önce bu konu hakkında farklı örnekler yapmıştım. Ama bu yazımın farkı, hazır bir kütüphane kullanmadan bütün kodlamasının, tasarımının benim tarafımdan yapılıyor olması. Bu yazıyla slider yapmanın bütün noktalarını sizlere açıklamış olacağım, sizler de kolayca kendinize uyarlayabilecek ya da kendinizin tasarımını yapabileceksiniz.

Bununla birlikte:

Yapacağım kayan içerik alanını biraz anlatayım. İleri ve geri butonlarımızla içerik alanını sırasıyla değiştirebileceğiz ve ayrıca da slider altında bulunacak küçük simgelerden istediğimiz içeriğe gideceğiz.


Bunun yanında, her 10 saniye de bir sonraki içeriğe otomatik olarak geçecek. Yapacağımız uygulama sadece resimlere yönelik değil, resim ve açıklamalarının birlikte kullanılacağı bir slider olacak. Uygulamamızı 1000px genişliğinde ele alarak geliştireceğim. Ayrıca, uygulamanın çalışması için resimlere ihtiyacınız olacak.

Bunun için, yazının sonunda çalışır halini sizlerle paylaşacağım.

Kodları BURADAN İNDİREBİLİRSİNİZ. iyi eğlenceler

Yukarıda uygulamamızı geliştirdik. Kodlamanın uzunluğu gözünüzü korkutmasın, temel mantığı basit sayılır. Sadece, sıfırdan bir uygulama yapmayı düşünüyorsanız çalışma mantığını iyice oturtmanız gerekiyor. Onun dışında yapılan diğer adımlar uygulamayı yazıya dökmek. Yukarıya eklemediğim css sıfırlama işlemi var fakat bunu indireceğiniz zipli dosyada bulabileceksiniz. Uygulamayı bölüm bölüm açıkladım, eğer anlamadığınız bir kısım olursa yorum yapmaktan çekinmeyin. Uygulamamızı geliştirerek bir yazımızın daha sonuna geldim. Uygulamanın bütün dosyalarının zipli halini buradan indirebilirsiniz. Yararlı olması dileğiyle.