Eklenti için Admin Panelinde Menü ve Alt Menüler Oluşturma | Eklenti Kodlama

Eklenti Tanımlama Yazar Adı, Eklenti Adı, Versiyon Bilgisi | Eklenti Kodlama

Periscope İndirme Bağlantısı ve Uygulama Hakkında Detaylı Bilgi

Ucuza Uçmanın Keyfini Sürün

Geçişli Slider Yapımı

Hazır Site Bileşenleri 6 Aralık 2016
356 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

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

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
458 Görüntülenme
Bunlar da var!
Apple TVdeki uygulama sayısı şimdiden 2600ü geçti

Apple TVdeki uygulama sayısı şimdiden 2600ü geçti

11 Aralık 2015
167 Görüntülenme
18 ürün için toplatma kararı

18 ürün için toplatma kararı

23 Haziran 2015
189 Görüntülenme
Sektörün zirvesini 3 dakikada hatırlayalım

Sektörün zirvesini 3 dakikada hatırlayalım

1 Haziran 2015
134 Görüntülenme
Mumu Söndüremeyen Ufaklık [Video]

Mumu Söndüremeyen Ufaklık [Video]

24 Eylül 2015
151 Görüntülenme
GİRİŞİMCİLİK NEDİR?

GİRİŞİMCİLİK NEDİR?

18 Nisan 2016
168 Görüntülenme
Birbirinden Çekişmeli 3 Kapışma

Birbirinden Çekişmeli 3 Kapışma

19 Nisan 2016
139 Görüntülenme