Otomatik Geçişli Slider Yapımı


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>

 

Konu İle İlgili Soru, Görüş ve Öneriler


koray demirci

17 Ocak 2018

bu sider da resim sayısını nasıl arttırıyoruz

Tuncay Akbaş

23 Eylül 2018

en sonuncu div in altına yapıştırıp alttaki url yi değiştirebilirsin

3 / 3

Sldier 3 Yazı Alanı

Burak Ce.

30 Eylül 2019

Merhaba,

Denediğim zaman resimler alt alta geliyor ve geçiş olmuyor. Sanırım javascript çalıştıramadım. Yardım lütfen.

Savaş Dersim Çelik

26 Ekim 2019

Javascript ve CSS dosyalarını doğru yere yazdığınızdan emin olun aynı zaman jquery kütüphanlerini dahil edin.

Mehmet Gergin

11 Kasım 2019

DotNetNuke’nin ücretsiz phpnuke var bizde. Bu kodlar ile çalışmıyor. Nasıl yapabilirim?
Fotoğraflar alt alta diziliyor. Kayan resim falan yok.

Özkan SİCİM

13 Kasım 2019

merhaba bunu oldugu yerde kapanı açılır yani kaymalı değil nasıl yaparız

K. Ak.

17 Kasım 2019

Merhabalar, buradaki resimleri bir klasör içinden çekebilir miyiz? yani klasör içinde 5 resim varsa 5 ini, 3 resim varsa 3 ünü kullanacak.
bunu yapabilir miyiz?

Furkan Demiroğlu

27 Aralık 2019

Acaba bir de tuş eklesem nasıl yaparım yapamadım

Soru, Görüş ve Önerileriniz için Yazın!