Hướng dẫn tạo Slideshow với HTML, CSS và Javascript - Thêm CSS
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> * { box-sizing:border-box } h2 { text-align: center; } /* Slideshow container */ .slideshow-container { max-width: 500px; position: relative; margin: auto; } /* Ẩn các slider */ .mySlides { display: none; } /* Định dạng nội dung Caption */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* định dạng các chấm chuyển đổi các slide */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* khi được hover, active đổi màu nền */ .active, .dot:hover { background-color: #717171; } /* Thêm hiệu ứng khi chuyển đổi các slide */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 3s; animation-name: fade; animation-duration: 3s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } </style> </head> <body> <div class="slideshow-container"> <h2>Freetus.net hướng dẫn tạo slideShow đơn giản</h2> <div class="mySlides fade"> <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-1.jpg" style="width:100%"> <div class="text">Nội dung caption của slide đầu tiên!</div> </div> <div class="mySlides fade"> <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-2.jpg" style="width:100%"> <div class="text">Nội dung caption của slide thứ 2!</div> </div> <div class="mySlides fade"> <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-3.jpg" style="width:100%"> <div class="text">Nội dung caption của slide thứ 3!</div> </div> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(0)"></span> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div> </body> </html>
PHÓNG TO