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 Sliderdaki 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 Sliderlara dair belki milyonlarca farklı örnek görebilirsiniz Zira eskiden kullanılan tek tip Sliderları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. Sliderları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 Sliderlar kodlama yapılarına göre otomatik olarak kendiliğinden ön tanımlı ayarlarda çalışabilir. Bazı Sliderlardaysa Sliderın çalışması için kullanıcının aksiyona geçmese gerekebilir. Örneğin, slider üzerinde yer alan diğer görsel thumbnaillere tıklamak veya butonlara tıklamak gibi gereklilikler Slidera ö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 Sliderlar 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 Sliderda 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 :
Sliderlar çeşitli programlama ve işaretleme dillerinden faydalanılarak meydana getirilirler. Genellikle Sliderları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 +800pxlik 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;}
}
[USER=350438]KeyF[/USER]rames 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ı
<div class="aw-slider">
<div>
<a class="resim1"><img src="http://lorempixel.com/800/330/cats"><span>Kediler</span></a>
<a class="resim2"><img src="http://lorempixel.com/800/330/nightlife"><span>Gece Hayatı</span></a>
<a class="resim3"><img src="http://lorempixel.com/800/330/fashion"><span>Moda</span></a>
<a class="resim4"><img src="http://lorempixel.com/800/330/food"><span>Yemek</span></a>
<a class="resim5"><img src="http://lorempixel.com/800/330/technics"><span>Teknik</span></a>
</div>
</div>alıntıdır//
Moderatör tarafında düzenlendi:
