SEOTurk Forum Üye Girişi Kayıt Ol
Giriş


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Information Css ile Yatay Menü Yapımı Heonir 0 81 04-30-2019, 09:36 AM
Son Yorum: Heonir
Exclamation Css ile Metin Kutusu Yapımı Heonir 0 62 04-29-2019, 04:09 PM
Son Yorum: Heonir

Css ile Slider Yapımı Google
Bilge Üye
*****

Mesaj Sayısı: 11
Rep Puanı: 7

Özel Mesaj Gönder E-Posta Gönder
#1
Başlayalım önce divleri oluşturuyoruz.
PHP Kod: (Hepsini seç)
<div id="slider-wrapper">
    <div class="slider">
        <class="img-bir">
            <img src="https://holistikakademi.com/wp-content/uploads/2017/12/mevlana-arka-plan.jpg">
            <span>Kategori</span>
         </a>
        <class="img-iki">
                <img src="http://hdresimler.net/wp-content/uploads/2017/12/Arka-Plan-Foto%C4%9Fraflar%C4%B1.jpg">
            <span>Kategori</span>
        </a>
       
        
<class="img-uc">
            <img src="https://i.ytimg.com/vi/gtbledPiZi4/maxresdefault.jpg">
            <span>Kategori</span>
        </a>
       
     
</div>
</
div


HTML yapısını oluşturduktan sonra slider-wrapper bölümünün Css kodlarını yazalım.
PHP Kod: (Hepsini seç)
#slider-wrapper{
  positionrelative;
  width:700px;
  height:400px;
  overflowhidden;


Slider boyutumuz 800x450 boyutunda olucak aşağıdaki gibi resimleri boyutlandırıyoruz.
PHP Kod: (Hepsini seç)
.img-bir, .img-iki, .img-uc{
  positionabsolute;
  width:700px;
  height:400px;



Şimdi resimlere left özelliği vererek yan yana sıralıyoruz.
PHP Kod: (Hepsini seç)
.img-bir{left0px;}.img-iki{left700px;}.img-uc{left1400px;} 

Kaydırma işleminin olacağı divi yapıyoruz.Bu hepsini kapsayacağı için 1400piksel olacak.
PHP Kod: (Hepsini seç)
#slider-wrapper > .slider{
  positionabsolute;
  left:0px;
  width1400px;
  height400px;
  -webkit-animation-duration15s;
  -webkit-animation-namesliders;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-duration15s;
  -moz-animation-namesliders;
  -moz-animation-iteration-count:infinite;
 




Şimdi ise sliderın üstüne fare geldiği zaman durmasını sağlayacak olan kodu yazıyoruz.
PHP Kod: (Hepsini seç)
#slider-wrapper > .slider:hover{
-webkit-animation-play-state:paused;



Son aşama ise keyframe yani başlangıç ve bitiş değerlerini yazalım.
PHP Kod: (Hepsini seç)
@-webkit-keyframes sliders{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:0px;}
  30% {left:0px;}
  40% {left:-700px;}
  50% {left:-700px;}
  60% {left:-700px;}
  70% {left:-1400px;}
  80% {left:-1400px;}
  90% {left:-1400px;}
}
@-
moz-keyframes sliders{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:0px;}
  30% {left:0px;}
  40% {left:-700px;}
  50% {left:-700px;}
  60% {left:-700px;}
  70% {left:-1400px;}
  80% {left:-1400px;}
  90% {left:-1400px;}
}
@-
ms-keyframes sliders {
0% {left:0px;}
  10% {left:0px;}
  20% {left:0px;}
  30% {left:0px;}
  40% {left:-700px;}
  50% {left:-700px;}
  60% {left:-700px;}
  70% {left:-1400px;}
  80% {left:-1400px;}
  90% {left:-1400px;}
}
@
keyframes sliders{
0% {left:0px;}
  10% {left:0px;}
  20% {left:0px;}
  30% {left:0px;}
  40% {left:-700px;}
  50% {left:-700px;}
  60% {left:-700px;}
  70% {left:-1400px;}
  80% {left:-1400px;}
  90% {left:-1400px;}



İşlem bu kadar istediğiniz gibi kullanabilirsiniz.

[Resim: oXD0OX.gif]


@Heonir


Ek Dosyalar Ekran Görüntüleri
   
04-29-2019, 05:17 PM
Cevapla


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Information Css ile Yatay Menü Yapımı Heonir 0 81 04-30-2019, 09:36 AM
Son Yorum: Heonir
Exclamation Css ile Metin Kutusu Yapımı Heonir 0 62 04-29-2019, 04:09 PM
Son Yorum: Heonir

« Önceki Konu | Sonraki Konu »

Lütfen Giriş Yapın & Kayıt Olun.
Bize Destek Olmak İçin Lütfen Hemen Giriş Yapın & Kayıt Olun
Hemen Kayıt Ol
Sitemize Çok Kolay Bir Şekilde Kayıt Olabilirsiniz. Kayıt olarak birçok içeriğe ücretsiz erişebilirsiniz !
&
Giriş yap
Zaten Bir Hesabınız Var Mı? Giriş yap.


Anahtar Kelimeler

Css ile Slider Yapımı, Css ile Slider Yapımı nedir, Css ile Slider Yapımı nasıl yapılır, Css ile Slider Yapımı seo, Css ile Slider Yapımı indir, Css ile Slider Yapımı hakkında bilgi, Css ile Slider Yapımı yardım, Css ile Slider Yapımı hatası, Css ile Slider Yapımı blog, Css ile Slider Yapımı ne işe yarar, Css ile Slider Yapımı ne işe yarar


Hızlı Menü:


Konuyu Okuyanlar: 1 Ziyaretçi