Cami Halısı Avrupada Lider Firma Gülseven Halı

Arçelik Güvenilir Servis Hizmetleri

Arçelik Buzdolabı Servisi

WordPress Eklentiye ait Klasör Dizin Adresi Öğrenebileceğiniz Kodlar

Otomatik Geçişli Slider Yapımı

Hazır Site Bileşenleri 6 Aralık 2016
195 Görüntülenme

Eğer bir projenizde slider’a ihtiyacınız var ise bunu çok basit bir şekilde yapabilirsiniz. Bu konumuzda otomatik geçişli bir slider yapımı ile ilgili gerekli kodları sizler ile paylaşacağız. Bu slider yapımında HTML – CSS – JavaScript Kodları kullanılmıştır.

HTML Kodları
<h2>Otomatik Geçişli Slider Yapımı</h2>
<p>Resimler 2 Saniye'de bir değişmektedir.</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  <div class="text">Sldier 1 Yazı Alanı</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
  <div class="text">Sldier 2 Yazı Alanı</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  <div class="text">Sldier 3 Yazı Alanı</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
Style Kodları
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
Javascript Kodları

Aşağıda yer alan kodlar ile resimleri otomatik olarak geçişini sağlayabilirsiniz. Kod içerisinde yer alan süre alanını değiştirerek kullanabilirsiniz.

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Bu alandan resimlerin geçiş süresini değiştirebilirsiniz.
}
</script>

 

Yorumlar

Henüz hiç yorum yapılmamış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
128 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
117 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
118 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
117 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
238 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
273 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
408 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
339 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
376 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
387 Görüntülenme
Bunlar da var!
Galaxy Note 4  ve iPhone 6 Verus kılıf incelemesi

Galaxy Note 4 ve iPhone 6 Verus kılıf incelemesi

17 Şubat 2015
92 Görüntülenme
Patlayan Hoverboard’ın parası geri ödenecek

Patlayan Hoverboard’ın parası geri ödenecek

25 Ocak 2016
144 Görüntülenme
Microsoft Lumia 650: Özellikler ve fiyat

Microsoft Lumia 650: Özellikler ve fiyat

21 Ocak 2016
131 Görüntülenme
3 Gereksiz Mobil Uygulamayı Test Ettik

3 Gereksiz Mobil Uygulamayı Test Ettik

26 Mart 2016
93 Görüntülenme
Facebook gazeteciler için Signali duyurdu

Facebook gazeteciler için Signali duyurdu

18 Eylül 2015
164 Görüntülenme