Basit slideshow nasıl yapabilirim?

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.

D

DoubleDragon

8 yıl

Yarbay

Neden hazır kodları kullanmak istemiyorsun ki? Her şeyi kendin yapmaya kalkarsan yapacağın işi bitiremezsin. Profesyonel iş yapan, template satan kişiler bile hazır kodları kullanıyor. Örnek olarak verdiğin link bile Owl Carousel kullanmış. Ama öğrenmek amacıyla basit bir slideshow kodlarını incelemek istiyorsan basit bir örnek vereyim.

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>jQuery ile basit bir slideshow</title> 
 <script 
   src="https://code.jquery.com/jquery-3.3.1.min.js" 
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
   crossorigin="anonymous"></script> 
 <style> 
 h1 { 
 	text-align: center; 
 } 
 #slideshow {  
     margin: 50px auto;  
     position: relative;  
     width: 600px;  
     height: 340px;  
     padding: 10px;  
     box-shadow: 0 0 20px rgba(0,0,0,0.4);  
 } 
  
 #slideshow > div {  
     position: absolute;  
     top: 10px;  
     left: 10px;  
     right: 10px;  
     bottom: 10px;  
 } 
 </style> 
 </head> 
  
 <body> 
 <h1>jQuery ile basit bir slideshow</h1> 
 <div id="slideshow"> 
    <div> 
      <img src="http://www.petwebsite.co.uk/media/k2/items/cache/0548677e6432786dd8df61eb3aaec139_L.jpg"> 
    </div> 
    <div> 
      <img src="http://www.petwebsite.co.uk/media/k2/items/cache/d3b3799d6611d677944f5f86a500beb3_L.jpg"> 
    </div> 
    <div> 
      <img src="http://www.petwebsite.co.uk/media/k2/items/cache/339a0e1449b6b4062056bc300d87e893_L.jpg"> 
    </div> 
 </div> 
  
 <script> 
 $( document ).ready(function() { 
 $("#slideshow > div:gt(0)").hide(); 
  
 setInterval(function() {  
   $('#slideshow > div:first') 
     .slideUp(1000) 
     .next() 
     .slideDown(1000) 
     .end() 
     .appendTo('#slideshow'); 
 },  3000); 
 }); 
 </script> 
 </body> 
  
 </html>

Yukarıdaki kodlarda slideUp ve slideDown ile geçiş efekti verilmiş. Bunların yerine fadeIn ve fadeOut ile solarak geçiş efekti veya toggle ile daha değişik bir efekt veya jQuery'nin diğer efektlerini kullanabilirsin. İşte sana basit slideshow örneği...

Haa unutmadan... Ben de bu kodları başka yerden arakladım. Üzerinde biraz değişiklik yaptım.

Bu mesaja 1 cevap geldi.

E

Egen ccaann

8 yıl

Teğmen

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

Neden hazır kodları kullanmak istemiyorsun ki? Her şeyi kendin yapmaya kalkarsan yapacağın işi bitiremezsin. Profesyonel iş yapan, template satan kişiler bile hazır kodları kullanıyor. Örnek olarak verdiğin link bile Owl Carousel kullanmış. Ama öğrenmek amacıyla basit bir slideshow kodlarını incelemek istiyorsan basit bir örnek vereyim.

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>jQuery ile basit bir slideshow</title> 
 <script 
   src="https://code.jquery.com/jquery-3.3.1.min.js" 
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
   crossorigin="anonymous"></script> 
 <style> 
 h1 { 
 	text-align: center; 
 } 
 #slideshow {  
     margin: 50px auto;  
     position: relative;  
     width: 600px;  
     height: 340px;  
     padding: 10px;  
     box-shadow: 0 0 20px rgba(0,0,0,0.4);  
 } 
  
 #slideshow > div {  
     position: absolute;  
     top: 10px;  
     left: 10px;  
     right: 10px;  
     bottom: 10px;  
 } 
 </style> 
 </head> 
  
 <body> 
 <h1>jQuery ile basit bir slideshow</h1> 
 <div id="slideshow"> 
    <div> 
      <img src="http://www.petwebsite.co.uk/media/k2/items/cache/0548677e6432786dd8df61eb3aaec139_L.jpg"> 
    </div> 
    <div> 
      <img src="http://www.petwebsite.co.uk/media/k2/items/cache/d3b3799d6611d677944f5f86a500beb3_L.jpg"> 
    </div> 
    <div> 
      <img src="http://www.petwebsite.co.uk/media/k2/items/cache/339a0e1449b6b4062056bc300d87e893_L.jpg"> 
    </div> 
 </div> 
  
 <script> 
 $( document ).ready(function() { 
 $("#slideshow > div:gt(0)").hide(); 
  
 setInterval(function() {  
   $('#slideshow > div:first') 
     .slideUp(1000) 
     .next() 
     .slideDown(1000) 
     .end() 
     .appendTo('#slideshow'); 
 },  3000); 
 }); 
 </script> 
 </body> 
  
 </html>

Yukarıdaki kodlarda slideUp ve slideDown ile geçiş efekti verilmiş. Bunların yerine fadeIn ve fadeOut ile solarak geçiş efekti veya toggle ile daha değişik bir efekt veya jQuery'nin diğer efektlerini kullanabilirsin. İşte sana basit slideshow örneği...

Haa unutmadan... Ben de bu kodları başka yerden arakladım. Üzerinde biraz değişiklik yaptım.

Merhaba,

örnek için çok teşekkür ederim. Ama bazı özeelikleri kötü olmuş. Resimler yukarıdan aşağıya düşüyor, sol,sağ okları olsaydı iyi olurdu.

Lütfen yardım edin.

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

İyi günler dileğiyle.

Bu mesaja 1 cevap geldi.

D

DoubleDragon

8 yıl

Yarbay

Daha önce dediğim gibi diğer jQuery efekt fonksiyonlarını kullanarak resimler arası değişik geçişler yapmak mümkündür. Sağ sol okları da sen yap. Ben basit bir şey olsun diye örnek verdim. Şu özellik de olsun bu özellik de olsun diye diye ortaya kapsamlı slideshow çıkar ama günler sürer. Zaten benim o kadar bilgim de yok. Piyasada zaten çok güzel yapılmış slideshowlar varken sıfırdan kodlama yapmak bana mantıksız geliyor. Tekeri yeniden keşfetmeye gerek yok.

Bu mesajda bahsedilenler: @Egen ccaann

E

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

E

Egen ccaann

8 yıl

Teğmen

Konu Sahibi

Merhaba,

arkadaşlar önceki mesajımdaki sorunları çözdüm. Şimdi resimleri veritabanından almak istiyorum. Bunun için foreach kullandım. Ama sorun şu hiç bir çıktı yok

Kodlar şu şekilde :

$vericek83 = $baglanti1 -> prepare("select * from gosterim"); 
   $vericek83 -> execute(); 
   $vericek83say = $vericek83 -> rowCount(); 
  
   if ($vericek83say == 0) { 
  
     echo "Count çalışmıyor"; 
  
   }elseif ($vericek83say > 0) { 
  
     ?> 
  
     <div id="slideshow"> 
  
     <a class="geri" onclick="yenislide(-1)">&#10094;</a> 
     <a class="ileri" onclick="yenislide(1)">&#10095;</a> 
  
     <?php 
  
     $numara = 0; 
  
       foreach ($vericek83 as $bilgiler83) { 
  
         $numara++; 
  
         ?> 
  
         <div class="slide yuz"> 
           <img src="<?php echo($bilgiler83["resimlink"]); ?>"> 
         </div> 
  
         <div> 
           <span class="yuvarlak" onclick="eskislide(<?php echo($numara); ?>)"></span> 
         </div> 
  
         <?php 
  
       } 
  
     ?> 
  
     </div> 
  
     <script type="text/javascript"> 
        
       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("slide"); 
   var dots = document.getElementsByClassName("yuvarlak"); 
   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> 
  
     <?php 
  
   } 
  
 ?> 
  
 <style> 
  
 *{ 
  
     box-sizing: border-box; 
  
   } 
  
   body{ 
  
     font-family: Verdana, sans-serif; 
     margin: 0; 
  
   } 
  
   .slide{ 
  
     display: none; 
  
   } 
  
   img{ 
  
     vertical-align: middle; 
  
   } 
  
   #slideshow{ 
  
     max-width: 1000px; 
     margin: auto; 
     position: absolute; 
     top: 150px; 
     left: 20px; 
  
   } 
  
   .geri, .ileri{ 
  
     cursor: pointer; 
     position: absolute; 
     top: 50%; 
     width: auto; 
     padding: 16px; 
     margin-top: -22px; 
     color: white; 
     font-weight: bold; 
     font-size: 18px; 
  
   } 
  
   .ileri{ 
  
     right: 0; 
     border-radius: 3px 0 0 3px; 
  
   } 
  
   .yuvarlak{ 
  
     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, .yuvarlak:hover{ 
  
     background-color: #717171; 
  
   } 
  
   .yuz{ 
  
     -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; 
  
     } 
  
   } 
  
   @media only screen and (max-width: 300px){ 
  
     .geri, .ileri{ 
  
       font-size: 11px; 
  
     } 
  
   } 
  
 </style>

Bağlantıda sorun yok gibi.

Bu sorunu nasıl çözebilirim?

Lütfen yardım edin.

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

İyi günler dileğiyle.