Selam Değerli THT Üyleri Bugun Sizlere Css İle Slider Örneği Yapacağız Destek Olmayı Unutmayınız :)) Öncelikle Terimleri Öğrenelim
Slider Nedir :
Slider, web tasarım terminolojisinde kullanılan bir terim olup, web sayfasına eklenen slayt ve sunular olarak kullanılır. Slider?ın kullanım amacı her internet sitesine göre farklılık gösterebilir ancak genellikle öne çıkan içerikler, en önemli içerikleri yada en son eklenen güncel içeriklerin gösterildiği görsel bölümler olarak kullanılırlar. Yapısına göre Slider?daki slayt şovlar otomatik olabileceği gibi kullanıcının geçiş yaparak kullanabileceği slayt şovlar da olabilir
Slider Örnekleri :
İnternet dünyasında Slider?lara dair belki milyonlarca farklı örnek görebilirsiniz Zira eskiden kullanılan tek tip Slider?ların aksine artık web geliştiricileri her internet sitesine kendi tarzına göre bir Slider tasarlıyor ve Slider?ın benzersiz görünmesi için ekstradan çaba sarf ediyor. Slider?ların sitenin tüm tasarımını değiştirebilecek ve içeriklerin servis edilmesine etki edebilecek bir faktör olduğunu da düşünecek olursak, bunun son derece doğal olduğu yorumunu yapabiliriz Slider?lar kodlama yapılarına göre otomatik olarak kendiliğinden ön tanımlı ayarlarda çalışabilir. Bazı Slider?lardaysa Slider?ın çalışması için kullanıcının aksiyona geçmese gerekebilir. Örneğin, slider üzerinde yer alan diğer görsel thumbnail?lere tıklamak veya butonlara tıklamak gibi gereklilikler Slider?a önceden tanımlanabilir Kısacası bir slider olarak internet dünyasında bulabileceğiniz milyon farklı çeşit bulunuyor Ben Sade Bir Başlangıç Yapmak İstedim umarım Beğenirsiniz En çok beğenilen Slider tipleriyse genellikle tasarımla bütünleşen ve içerik yapısını en iyi şekilde ortaya koymayı başaran, en hızlı yüklenen hafif tasarımlı Slider örnekleri oluyor Slider?lar JavaScript ve jQuery gibi farklı programlama dilleriyle meydana getiriliyor. Bu kadar yüksek görselliğin elbette internet sitesinin hızına etkisi her zaman beklenen düzeyde olmuyor. Özellikle Slider?da yayınlanan görsellerin kalitesinin çok yüksek olması yada efektlerin kalitesi Slider?ın boyutunu etkiliyor ki, bu da sitenin yavaşlamasına neden oluyor Bir Slider seçimi yapılırken mobil uyumun da göz önünde tutulması gerekir. Mobil sitenizde de Slider?ın işlevsel, göz yormayan, kolay kullanımlı ve esnek yapılı olması gerekir.
Slider Nasıl Yapılır :
Slider?lar çeşitli programlama ve işaretleme dillerinden faydalanılarak meydana getirilirler. Genellikle Slider?ların yapısında HTML5, CSS, JS, jQuery ve PHP gibi farklı yazılım dillerinden faydalanılır. Bunların aksine bazı Slider modelleri framework olarak yayınlanır. Geliştiriciler bu framework kütüphaneleri indirdikten sonra kendilerine göre düzenleyip yapılandırabilir ve ortaya tümüyle istedikleri bir Slider çıkarabilirler Eğer kullandığınız sistem dünyaca ünlü olarak kullanılan popüler CMS türlerinden biri değilse, Slider oluşturmak için programlama dili bilmeniz gerekiyor. Bunu da kısa sürede öğrenemeyeceğiniz için en mantıklı çözüm bir geliştiriciyle anlaşarak sizin için fonksiyonel bir slider tasarlamasını ve sitenize yerleştirmesini istemek olacaktır WordPress ve benzeri bir CMS sistemi kullanıyorsanız çok az kod bilgisiyle veya hiç kod bilgisi olmadan kullanabileceğiniz onlarca Slider eklentisi bulunuyor. Bu Slider eklentilerinden herhangi birini değerlendirerek tam istediğiniz gibi bir Slider?ı dakikalar içinde hazırlayıp internet sitenize ekleyebilirsiniz Aşağıda Yer Alan Örnek Çalışmayı Sizde Üzerinde Değişiklik Yaparak Kullanabilirsiniz
DEMO https://www.birgulemarket.com/slidertht.html
CSS Kodları :
İlk olarak Adobewordpress Slider olarak isimlendirdiğimiz bu tasarımın dış çerçevesini oluşturalım. 800×330 piksellik bir sunum olacak Sizin Video Veya Resim Boyutuna Göre Bu Boyutlar Değişebilir
Kod:
.aw-slider
{
width:800px;
height:330px;
overflow: hidden;
position: relative;
}
Şimdi gösterilecek görsellerin boyutlarını ve yapısını belirleyeyim. Beraberinde de alt yazı açıklamalarını hazırlayalım.
.resim1, .resim2, .resim3, .resim4, .resim5
{
position: absolute;
width:800px;
height:330px;
}
.aw-slider > div > a > span{
position:absolute;
display:table;
background-color:black;
color:white;
right:0;
bottom:0;
padding:5px 10px;
}
Her bir resim 800px boyutunda olduğu için slideların her biri için +800px?lik bir left vermemiz gerekiyor.
.resim1{left: 0;}
.resim2{left: 800px;}
.resim3{left: 1600px;}
.resim4{left: 2400px;}
.resim5{left: 3200px;}
Bütün bu yapıları içinde barındıracak ve animasyonu oluşturacak division öğesini tanımlayalım. Örnekte 5 adet görsel kullandık diye 20 saniyelik bir animasyon oluşturduk. Ayrıca 800×5 piksellik bir görsel sunumumuz olduğu için de bu alanda genişlik değerimiz 3200px olarak ayarlı kalmalı. Bu Ayarları Değiştirebilirsiniz Ben Kendime Göre Hazırladım
Kod:
.aw-slider > div
{
width: 3200px;
height: 330px;
left:0px;
position: absolute;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-name: gecisler;
-moz-animation-duration: 20s;
-moz-animation-iteration-count:infinite;
-moz-animation-name: gecisler;
-ms-animation-duration: 20s;
-ms-animation-iteration-count:infinite;
-ms-animation-name: gecisler;
animation-duration: 20s;
animation-iteration-count:infinite;
animation-name: gecisler;
}
Resimlerin üzerine geldiğinde netlikleri artsın, animasyon ise dursun.
.aw-slider > div img{
opacity: 0.9;
filter: alpha(opacity=95);
}
.aw-slider > div img:hover{
opacity: 1;
filter: alpha(opacity=100);
}
.aw-slider > div:hover{
-webkit-animation-play-state:paused;
/* Bu CSS tanımı Chrome 4.0, IE10, Firefox 16, Safari 4, Opera 15 ve üstü versiyonlarda çalışmaktadır*/
}
Ve son olarak cross browser yapıda gecisler isimli animasyonumuzu tanımlayalım.
@-webkit-keyframes gecisler
{
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
@-moz-keyframes gecisler
{
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
@-ms-keyframes gecisler
{
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
@KeyFrames gecisler
{
0% {left:0px;}
10% {left:0px;}
20% {left:-800px;}
30% {left:-800px;}
40% {left:-1600px;}
50% {left:-1600px;}
60% {left:-2400px;}
70% {left:-2400px;}
80% {left:-3200px;}
90% {left:-3200px;}
}
Kod:
HTML Kodları
