Bu yazımızda CSS ile Basit Slider yapacağız.
İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde ben 700×400 boyutlarda bir resim kullanıyorum. İlk olarak sliderı ekranın ortasına gelecek şekilde ayarlıyoruz. Resimler şimdilik alt alta gelecekler.
Slider için kapsayıcı bir div açıyoruz. Burası ekranda görülecek olan kısmımız. ‘Slider’ adını verdiğimiz div ise resimlerin toplam genişlikleri kadar olacak olan kısım. Bu sayede resimler yan yana duracaklar.
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="sayfa"> <div class="sliderKonum"> <div class="slider"> <a class="img-bir" href="img/700x400.png"> <img src="img/700x400.png" alt="resim"> </a> <a class="img-iki" href="img/700x400.png"> <img src="img/700x400.png" alt="resim"> </a> <a class="img-uc" href="img/700x400.png"> <img src="img/700x400.png" alt="resim"> </a> </div> </div> </div> |
CSS:
|
1 2 3 4 5 6 |
.sayfa{ width: 700px; margin: 0 auto; } |
Kapsayıcı olarak açtığımız divin genişliğini ve yüksekliğini resimlerin boyutunda ayarlıyoruz ve sadece 1 resmin görülebilmesi için ‘overflow:hidden’ ile diğer resimlerin görünmemesini sağlıyoruz. Position:Relative olarak ayarlıyoruz. Oluşturduğumuz sliderın kayarak geçmesi için slider adını verdiğimiz divin Position özelliğini Absolute olarak ayarlayacağız.
|
1 2 3 4 5 6 7 8 |
.sliderKonum{ position: relative; width: 700px; height: 400px; overflow: hidden; } |
Daha sonra resimlerin ilk konumlarını ayarlıyoruz. İlk resmin konumunu 0(sıfır) olarak ayarladıktan sonra diğer resimleri genişlikleri kadar kaydırıyoruz.
|
1 2 3 4 5 |
.img-bir{left: 0px;} .img-iki{left: 700px;} .img-uc{left: 1400px;} |
Slider divinin genişliğini konulacak resimlerin toplam genişliği kadar yapıyoruz. Bu örnekte 3 resim koyacağımız için 2800px olarak belirledik. Bunları tarayıcılar için okunabilir duruma getirmek için ise webkit kullanıyoruz. Tarayıcının yorumlayacağı kısımlarda geçiş süresini, animasyon adını ve kaç kez tekrarlanacağını belirliyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.sliderKonum > .slider{ position: absolute; left:0px; width: 2800px; height: 400px; -webkit-animation-duration: 10s; -webkit-animation-name: sliders; -webkit-animation-iteration-count:infinite; -moz-animation-duration: 10s; -moz-animation-name: sliders; -moz-animation-iteration-count:infinite; -ms-animation-duration: 10s; -ms-animation-name: sliders; -ms-animation-iteration-count:infinite; animation-duration: 10s; animation-iteration-count:infinite; } |
Daha sonra CSS3 ile kullanılan başlangıç ve bitiş olaylarını ayarladığımız keyframe’leri ekliyoruz. Slider sola doğru hareket edeceği için –(eksi) yöndeki konumlarını ayarlıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
@-webkit-keyframes sliders{ 0% {left:0px;} 10% {left:0px;} 20% {left:-700px;} 30% {left:-700px;} 40% {left:-1400px;} 50% {left:-1400px;} } @-moz-keyframes sliders{ 0% {left:0px;} 10% {left:0px;} 20% {left:-700px;} 30% {left:-700px;} 40% {left:-1400px;} 50% {left:-1400px;} } @-ms-keyframes sliders { 0% {left:0px;} 10% {left:0px;} 20% {left:-700px;} 30% {left:-700px;} 40% {left:-1400px;} 50% {left:-1400px;} } @keyframes sliders{ 0% {left:0px;} 10% {left:0px;} 20% {left:-700px;} 30% {left:-700px;} 40% {left:-1400px;} 50% {left:-1400px;} } |
Ekran Çıktısı şu şekilde olacaktır.
Öncelikle böyle bir bilgiyi bizimle paylaştığınız için teşekkür ederiz. Fakat benim kullanıdğım resimlerin boyutu w1000px h400px boyutlarını ayarladıktan sonra CSS’de yaptığım genişlik değerlerini resmin boyutu ile aynı yaptım fakat olmadı. Sanırım konumda sıkıntı var.Bu durum için ne yapmam gerekir ? TEŞEKKÜRLER…
Dostum aynı şekilde bende’de böyle bi problem oldu.
biraz geç oldu ama img-bir class ını css kısmından bulup
.img-bir{
margin-left: -4px;
left: 0px;
}
Şeklinde değiştirmelisin o zaman sorun kalmıyor
[…] CSS Slider Yapımı […]
benim koyduğum resimlerin solundan 1 2 piksel kadar boşluk kalıyor anlayamadım.sizce neden olabilir.
Tarayıcı ‘a‘ etiketinin genişlik değerine ekleme yapıyor. Bunun için ilk resme eksi değerinde margin-left verirseniz sorun çözülmüş olacaktır. Taşan kısımlar da gizlendiği için bir sorun oluşmayacaktır.
Css kullanarak slider yapma fikri ilginç geldi. Paylaşım için teşekkürler