(Turkish) SESLENDİRME SANATÇILARI VOİCEBROS’TA TOPLANDI!

(Turkish) Android Yazılım Uzmanlığı

(Turkish) Çağrı Merkezleri Derneği’nin Yeni Dönem Yönetim Kurulu Başkanı Rengin Ağılönü Oldu

(Turkish) Yüzde yüz Türk girişimi Getir’den Yemeğini Sıcak Sevenlere Çözüm GetirYemek Hizmete Açıldı

Geçişli Slider Yapımı

  • Web Elements
  • Savaş Dersim Çelik
  • Tuesday December 6th, 2016
  • 2,717 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

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ış.

Benzer İçerikler