Örnek Sayfa Uygulamaları Slayt

 

 

 

Kaynak Kodu

Aşağıdaki kaynak kodunu sayfa veya duyuru içeriğinin kaynak bölümüne ekleyerek kullanabilirsiniz.

Slayt alanının genişliği ve yüksekliğini kullanacağınız resimlerin genişlik ve yüksekliği ile aynı olacak şekilde 1. satırdaki  style="width:600px;height:450px" ifadesinden değiştirebilirsiniz.

Slayt resim sayısını çoğaltmak için

  1. 4. satırı kopyalayıp 4 ile 5. satırlar arasına ve de 15-21. satırlar arasını kopyalayıp 21 ile 22. satırlar arasına yapıştırın.
  2. 4. satırdaki data-slide-to="1" ifadesindeki 1 rakamını arttırın.
  3. 16. satırdaki src=" " ifadesindeki tırnakların içine resim dosyasının linkini yapıştırın.
  4. 18 ve 19. satırlardaki resim etiketi ve açıklama alanlarını doldurun. 
  5. Resim üzerine link eklemek için ile 9. satırdaki gibi <a href="http://www.ktu.edu.tr">...</a> link kaynak kodunu kullanabilirsiniz.

 

  1. <div id="slaytpenceresi" class="carousel slide" style="width:600px;height:450px">
  2. <ol class="carousel-indicators">
  3. <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  4. <li data-target="#myCarousel" data-slide-to="1"></li>
  5. </ol>
  6. <!-- Carousel items -->
  7. <div class="carousel-inner">
  8. <div class="active item">
  9. <a href="http://www.ktu.edu.tr"><img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""></a>
  10. <div class="carousel-caption">
  11. <h4>Resim Etiketi</h4>
  12. <p>Resim Açıklaması.</p>
  13. </div>
  14. </div>
  15. <div class="item">
  16. <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
  17. <div class="carousel-caption">
  18. <h4>Resim Etiketi</h4>
  19. <p>Resim Açıklaması.</p>
  20. </div>
  21. </div>
  22. </div>
  23. <!-- Carousel nav -->
  24. <a class="carousel-control left" href="#slaytpenceresi" data-slide="prev">&lsaquo;</a>
  25. <a class="carousel-control right" href="#slaytpenceresi" data-slide="next">&rsaquo;</a>
  26. </div>