Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

Otomatik Geçişli Slider Yapımı

Hazır Site Bileşenleri 6 Aralık 2016
373 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
544 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
559 Görüntülenme
Bunlar da var!
Quadro’dan 42 Gram Ağırlığında Mini Bilgisayar

Quadro’dan 42 Gram Ağırlığında Mini Bilgisayar

13 Mayıs 2015
243 Görüntülenme
4.5 G nedir ?

4.5 G nedir ?

25 Ocak 2016
188 Görüntülenme
Yüksek hızlı internet yaygınlaşınca neler olacak?

Yüksek hızlı internet yaygınlaşınca neler olacak?

30 Kasım -0001
168 Görüntülenme
Nevzat Aydın yatırımcılığı neden sevmiyor?

Nevzat Aydın yatırımcılığı neden sevmiyor?

17 Haziran 2015
217 Görüntülenme