MultiFlex-2 Web Site Tasarımı

Monkeys Web Site Tasarımı

Lazy Days Web Site Tasarımı

In a Pickle Web Site Tasarımı

Geçişli Slider Yapımı

Hazır Site Bileşenleri Salı Aralık 6th, 2016
480 Görüntülenme

Merhaba arkadaşlar daha önce otomatik geçişli bir slider yapımına ait kodları diğer konumuzda sizler ile paylaşmıştık. Bu konumuzda ise arkadaşlar kullanıcı kontrol sağlayabildiği bir slider kodlarını sizler ile paylaşacağız. Gerekli kodlara konu içerisinden ulaşabilirsiniz veya konu altında ki demo butonuna tıklayarak kontrol edebilirsiniz.

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ı
/*
* Webinyo.COM Slider Yapımı
*/

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

/* Slayt gösterisi */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Sonraki ve önceki düğmeler */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Bir sonraki düğmeyi" sağa getirin */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Fareyle üzerine gelin, biraz gören siyah arka plan rengi ekleyin */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

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

/* Sayı metni */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Nokta göstergeler */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Solgun animasyon */
.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}
}

/* Daha küçük ekranlarda, metin boyutunu azaltın */
@media only screen and (max-width: 300px) {
  .prev, .next,.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.

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  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";
}

 

Yorumlar

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

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

Salı Ocak 17th, 2017
1.624 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
636 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.365 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.659 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

Pazar Aralık 18th, 2016
597 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
549 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
567 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
639 Görüntülenme
Bunlar da var!
Uyanmakta Zorlananlar İçi [Video]

Uyanmakta Zorlananlar İçi [Video]

Perşembe Kasım 12th, 2015
252 Görüntülenme
Logitech Jaybird’ü satın aldı

Logitech Jaybird’ü satın aldı

Salı Nisan 19th, 2016
216 Görüntülenme
Yaşanmış En Korkunç YAMYAMLIK Olayı

Yaşanmış En Korkunç YAMYAMLIK Olayı

Cumartesi Nisan 23rd, 2016
254 Görüntülenme
Dronea Havai Fişek Takıp Arkadaşını Vurdu [Video]

Dronea Havai Fişek Takıp Arkadaşını Vurdu [Video]

Pazar Ekim 18th, 2015
232 Görüntülenme
Teknolojik Kar Küreme Aracı [Video]

Teknolojik Kar Küreme Aracı [Video]

Cuma Ekim 30th, 2015
264 Görüntülenme
Just Cause 3 Performans Güncellemeleri Bekleniyor

Just Cause 3 Performans Güncellemeleri Bekleniyor

Cuma Ocak 15th, 2016
215 Görüntülenme