Basit slideshow nasıl yapabilirim?

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Basit slideshow nasıl yapabilirim?

Bu konudaki kullanıcılar: 1 misafir

5
Cevap 1164
Tıklama 0
Öne Çıkarma

1. sayfa

Basit slideshow nasıl yapabilirim?

Cevap Yaz

Egen ccaann

8 yıl

Teğmen

Konu Sahibi

Merhaba,

arkadaşlar ben basit bir slideshow yapmak istiyorum.

Aşağıdaki sitede bir örnek buldum :
https://www.w3schools.com/howto/howto_js_slideshow.asp

Ama çok karışık, style ve javascript kodlarını anlamakta biraz zorluk çekiyorum. Benim istediğim çok profesyonel olmayan, basit anlaşılabilir ve dışarıdan hazır script almadan bir slideshow yapmak istiyorum. Birde kendi kendine dönse iyi olur.

Örnek :
http://www.eba.gov.tr/ (slideshow)

Lütfen yardım edin.

Yardımınıza ihtiyacım var.

İyi günler dileğiyle.

Egen ccaann

8 yıl

Teğmen

Konu Sahibi

Merhaba,

arkadaşlar şöyle bir kod buldum (w3school'dan) :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.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;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  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) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <img src="img_nature_wide.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="img_fjords_wide.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="img_mountains_wide.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<script>
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";
}
</script>

</body>
</html>

İsterseniz şu siteden bakabilirsiniz :
https://www.w3schools.com/howto/howto_js_slideshow.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

Ama bir kaç şeyi sildim.

Öncesi :

< Resime gitmek için tıklayın >

Sonrası :

< Resime gitmek için tıklayın >

Textleri ve yukarı soldaki numaraları sildim.

Ama bazı yerileri anlamadım ve değiştirmek istediğim yerler var.

Değiştirmek istediğim yerler :

< Resime gitmek için tıklayın >

Değiştirmek istediğim numaralar sliderin üzerinde olabilirdi (text yerinde)

Birde slider tam sayfa ona bir height ve width değerleri vermem lazım

Sizden istediğim koda yorum satırı ekleyerek anlamayı kolaylaştırmak ve silmek, değiştirmek istediğim yerlere göre kodu düzenlemek.

Lütfen yardım edin.

Cevaplarınız için şimdiden çok teşekkür ederim.

İyi günler dileğiyle.

< Bu mesaj bu kişi tarafından değiştirildi Egen ccaann -- 26 Ocak 2018; 21:10:5 >

Bu mesajda bahsedilenler: @DoubleDragon

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Basit slideshow nasıl yapabilirim?