Slideshow là một phần quan trọng của các trang web hiện đại. Nó giúp tạo ra hiệu ứng chuyển động đẹp mắt và tương tác người dùng thú vị. Trong bài viết này, chúng ta sẽ hướng dẫn cách tạo slideshow bằng Javascript. Tuy nhiên, trước khi bắt đầu, chúng ta cần có kiến thức về lập trình web bao gồm HTML, CSS và đặc biệt là Javascript.
Ý tưởng tạo slideshow
Có rất nhiều cách để tạo slideshow bằng Javascript. Trong bài viết này, mình sẽ chỉ trình bày một ý tưởng cụ thể. Tuy nhiên, sau khi hiểu ý tưởng này, bạn có thể tự tạo ra kịch bản cho riêng mình.
Dưới đây là hình ảnh của một slide bao gồm ảnh, tiêu đề, mô tả và một nút bấm.
Các bước để tạo slideshow như sau:
- Tạo 3 thẻ div tương ứng với 3 thành phần: nút bấm chuyển slide trước, nút bấm chuyển slide tiếp theo và phần hiển thị ảnh và nội dung của slide.
- Tạo nội dung cho phần hiển thị của slide.
- Cải thiện giao diện bằng CSS.
- Thêm sự kiện với Javascript để chuyển slide tự động và khi người dùng thao tác.
Cách tạo slideshow chi tiết
Bước 1: Tạo 3 thành phần thẻ div
<div id="mySlider"></div> <div id="sliderNav"> <div id="sliderPrev" onclick="prevSlide();"><img src="https://blog.luyencode.net/wp-content/uploads/2020/09/left-arrow.png"></div> <div id="sliderNext" onclick="nextSlide();"><img src="https://blog.luyencode.net/wp-content/uploads/2020/09/right-arrow.png"></div> </div>Bước 2: Tạo nội dung cho phần hiển thị của slide
Ở bước này, chúng ta sẽ sử dụng Javascript để tạo các đối tượng slide và lưu chúng vào một mảng. Việc sử dụng Javascript giúp chúng ta linh hoạt quản lý slide qua các tham số được cấu hình trước, sử dụng ảnh slide dưới dạng background-image và quản lý theo kiểu hướng đối tượng.
Đầu tiên, ta sẽ khai báo các biến cần thiết và tạo hàm Slide để tạo slide.
var slideIndex = 0; // Chỉ số của slide var currentSlideIndex = 0; // Chỉ số slide hiện tại var slideArray = []; // Mảng chứa các slide function Slide(title, subtitle, background, link) { this.title = title; this.subtitle = subtitle; this.background = background; this.link = link; this.id = "slide" + slideIndex; // Định danh slide slideIndex++; // Tăng chỉ số slide slideArray.push(this); // Thêm slide vào mảng }Tiếp theo, ta tạo các đối tượng slide bằng cách gọi hàm Slide.
var walkingDead = new Slide( "The Walking Dead", "A show about fighting zombies", "https://acollectivemind.files.wordpress.com/2013/12/season-4-complete-cast-poster-the-walking-dead-the-walking-dead-35777405-2528-670.png", "http://www.amc.com/shows/the-walking-dead" ); var bigBang = new Slide( "The Big Bang Theory", "A show about Sheldon", "https://www.denofgeek.com/wp-content/uploads/2019/02/tbbt_12-15.jpg", "http://www.cbs.com/shows/big_bang_theory/" ); var lastMan = new Slide( "The Last Man on Earth", "A show about loneliness", "https://www.wired.com/wp-content/uploads/2015/02/LMOE-AliveInTuscon_scene44_0028_hires2.jpg", "http://www.fox.com/the-last-man-on-earth" );Cuối cùng, ta tạo hàm buildSlider để hiển thị các slide lên trang web.
function buildSlider() { var myHTML = ""; // Biến chứa mã HTML của slide for (var i = 0; i < slideArray.length; i++) { myHTML += "<div id='" + slideArray[i].id + "' class='singleSlide' style='background-image:url(" + slideArray[i].background + ");'>" + "<div class='slideOverlay'>" + "<h1>" + slideArray[i].title + "</h1>" + "<h4>" + slideArray[i].subtitle + "</h4>" + "<a href='" + slideArray[i].link + "' target='_blank'>Xem chi tiết</a>" + "</div>" + "</div>"; } document.getElementById("mySlider").innerHTML = myHTML; document.getElementById("slide" + currentSlideIndex).style.left = 0; } buildSlider();Bước 3: Tạo giao diện cho slideshow
Trong bước này, chúng ta sẽ cải thiện giao diện của slide bằng CSS. Chúng ta có thể điều chỉnh vị trí, căn chỉnh và hiệu ứng chuyển động của các thành phần của slide như tiêu đề, mô tả, button và slide.
body { text-align: center; font-size: 18px; background-size: cover; color: #fff; font-family: sans-serif; margin: 0; padding-top: 0; } h1 { font-size: 48px; } h4 { font-size: 24px; } a { padding: 10px 25px; background-color: #4ca74c; color: #fff; border-radius: 25px; text-decoration: none; } #mySlider { overflow: hidden; position: relative; width: 100%; height: 300px; } .singleSlide { background-size: cover; height: 300px; position: absolute; left: 100%; width: 100%; top: 0px; } .slideOverlay { background-color: rgba(0, 0, 0, 0.5); padding: 50px; } #sliderNav { position: relative; top: -175px; } #sliderNav:hover { cursor: pointer; } #sliderPrev { position: relative; float: left; left: 50px; } #sliderNext { position: relative; float: right; right: 50px; } #sliderNext img, #sliderPrev img { width: 32px; } @-webkit-keyframes slideIn { 100% { left: 0; } } @keyframes slideIn { 100% { left: 0; } } .slideInRight { left: -100%; -webkit-animation: slideIn 1s forwards; animation: slideIn 1s forwards; } .slideInLeft { left: 100%; -webkit-animation: slideIn 1s forwards; animation: slideIn 1s forwards; } @-webkit-keyframes slideOutLeft { 100% { left: -100%; } } @keyframes slideOutLeft { 100% { left: -100%; } } .slideOutLeft { -webkit-animation: slideOutLeft 1s forwards; animation: slideOutLeft 1s forwards; } @-webkit-keyframes slideOutRight { 100% { left: 100%; } } @keyframes slideOutRight { 100% { left: 100%; } } .slideOutRight { -webkit-animation: slideOutRight 1s forwards; animation: slideOutRight 1s forwards; }Bước 4: Thêm sự kiện với Javascript
Cuối cùng, chúng ta sẽ thêm sự kiện cho các nút bấm để chuyển slide. Khi người dùng bấm nút chuyển slide trước hoặc sau, slide hiện tại sẽ biến mất và slide mới sẽ xuất hiện với hiệu ứng chuyển động.
function prevSlide() { var nextSlideIndex; if (currentSlideIndex === 0) { nextSlideIndex = slideArray.length - 1; } else { nextSlideIndex = currentSlideIndex - 1; } document.getElementById("slide" + nextSlideIndex).style.left = "-100%"; document.getElementById("slide" + currentSlideIndex).style.left = 0; document .getElementById("slide" + nextSlideIndex) .setAttribute("class", "singleSlide slideInLeft"); document .getElementById("slide" + currentSlideIndex) .setAttribute("class", "singleSlide slideOutRight"); currentSlideIndex = nextSlideIndex; } function nextSlide() { var nextSlideIndex; if (currentSlideIndex === slideArray.length - 1) { nextSlideIndex = 0; } else { nextSlideIndex = currentSlideIndex + 1; } document.getElementById("slide" + nextSlideIndex).style.left = "100%"; document.getElementById("slide" + currentSlideIndex).style.left = 0; document .getElementById("slide" + nextSlideIndex) .setAttribute("class", "singleSlide slideInRight"); document .getElementById("slide" + currentSlideIndex) .setAttribute("class", "singleSlide slideOutLeft"); currentSlideIndex = nextSlideIndex; }Kết quả cuối cùng
Bạn có thể tham khảo kết quả tạo slideshow bằng Javascript và mã nguồn đầy đủ thông qua đây.
Tạo slideshow với Bootstrap
Nếu bạn đang sử dụng Bootstrap, quá trình này sẽ đơn giản hơn rất nhiều vì thư viện này hỗ trợ chúng ta rất nhiều. Bạn chỉ cần một số dòng code để tạo slideshow với kết quả tương tự như trên.
Dưới đây là mã nguồn HTML sử dụng Bootstrap để tạo slideshow.
<!DOCTYPE html> <html lang="vi"> <head> <title>Ví dụ Carousel Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Ví dụ Carousel</h2> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="la.jpg" alt="Los Angeles" style="width:100%;"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>LA is always so much fun!</p> </div> </div> <div class="item"> <img src="chicago.jpg" alt="Chicago" style="width:100%;"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="item"> <img src="ny.jpg" alt="New York" style="width:100%;"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>Lưu ý: Đổi đường dẫn ảnh thành ảnh của bạn để tránh lỗi khi tạo slideshow.
Nguồn tham khảo: w3schools.com
Như vậy, bài viết đã hướng dẫn các bạn tạo slideshow bằng Javascript và Bootstrap. Bạn có thể tùy chỉnh lại theo ý muốn của mình. Hẹn gặp lại bạn ở bài viết tiếp theo!
