Otomatik Geçişli Slider Nasıl Yapılır

Otomatik Geçişli Slider Nasıl Yapılır

Otomatik Geçişli Slider Nasıl Yapılır

Slider Yapımı İçin Html ,Css ve JavaScrip Kodlarını Aşağıya Ekledim 

HTML Kodları

  1. Otomatik Geçişli Slider Yapımı

  2. Resimler 2 Saniye'de bir değişmektedir.

  4. "slideshow-container">
  6. "mySlides fade">
  7. "numbertext">1 / 3
  8. "http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
  9. "text">Sldier 1 Yazı Alanı
  • "mySlides fade">
  • "numbertext">2 / 3
  • "http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
  • "text">Sldier 2 Yazı Alanı
  • "mySlides fade">
  • "numbertext">3 / 3
  • "http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
  • "text">Sldier 3 Yazı Alanı

  • "text-align:center">
  • "dot">
  • "dot">
  • "dot">
    • Style Kodları
    1. * {box-sizing:border-box}
    2. body {font-family: Verdana,sans-serif;}
    3. .mySlides {display:none}
    5. /* Slideshow container */
    6. .slideshow-container {
    7. max-width: 1000px;
    8. position: relative;
    9. margin: auto;
    10. }
    12. /* Caption text */
    13. .text {
    14. color: #f2f2f2;
    15. font-size: 15px;
    16. padding: 8px 12px;
    17. position: absolute;
    18. bottom: 8px;
    19. width: 100%;
    20. text-align: center;
    21. }
    23. /* Number text (1/3 etc) */
    24. .numbertext {
    25. color: #f2f2f2;
    26. font-size: 12px;
    27. padding: 8px 12px;
    28. position: absolute;
    29. top: 0;
    30. }
    32. /* The dots/bullets/indicators */
    33. .dot {
    34. height: 13px;
    35. width: 13px;
    36. margin: 0 2px;
    37. background-color: #bbb;
    38. border-radius: 50%;
    39. display: inline-block;
    40. transition: background-color 0.6s ease;
    41. }
    43. .active {
    44. background-color: #717171;
    45. }
    47. /* Fading animation */
    48. .fade {
    49. -webkit-animation-name: fade;
    50. -webkit-animation-duration: 1.5s;
    51. animation-name: fade;
    52. animation-duration: 1.5s;
    53. }
    55. @-webkit-keyframes fade {
    56. from {opacity: .4}
    57. to {opacity: 1}
    58. }
    60. @keyframes fade {
    61. from {opacity: .4}
    62. to {opacity: 1}
    63. }
    65. /* On smaller screens, decrease text size */
    66. @media only screen and (max-width: 300px) {
    67. .text {font-size: 11px}
    68. }
    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.

     

    Whatsapp