Tin tức và phân tích của tất cả các thiết bị di động
blogs3

Cách tạo thanh trượt hình ảnh bằng JavaScript để trang web của bạn mạnh mẽ hơn

Bạn đã bao giờ rơi vào tình huống muốn hiển thị một số ảnh/video trong một phần của trang web nhưng không muốn chiếm nhiều dung lượng chưa? Bạn có muốn thêm tính tương tác vào trang web của mình hoặc làm cho chúng hấp dẫn hơn không?

Thanh trượt hình ảnh có thể giúp bạn tránh khỏi rắc rối. Trong bài viết này, chúng tôi sẽ xác định thanh trượt hình ảnh, các điều kiện tiên quyết để tạo thanh trượt hình ảnh và cách tạo thanh trượt hình ảnh bằng HTML, JavaScript và CSS.

Thanh trượt hình ảnh là gì?

Thanh trượt là băng chuyền hoặc trình chiếu hiển thị văn bản, hình ảnh hoặc video. Trong bài viết này, chúng tôi sẽ tập trung vào thanh trượt hình ảnh. Hầu hết người xây dựng trang web đều sử dụng thanh trượt trang chủ để quảng bá các ưu đãi hoặc điểm nổi bật.

Dưới đây là một số lý do tại sao bạn nên sử dụng thanh trượt trên trang web của mình.

  • Cải thiện trải nghiệm người dùng: Một trang web lý tưởng phải nhỏ gọn để người dùng cuối không phải cuộn đi cuộn lại để lấy những dữ liệu quan trọng. Nếu bạn có nhiều hình ảnh, bạn có thể giúp người dùng tránh khỏi rắc rối khi cuộn bằng cách hiển thị chúng trên một thanh trượt.
  • Sự hấp dẫn trực quan: Hầu hết khách truy cập trang web sẽ không dành nhiều thời gian cho một trang web thông thường. Bạn có thể nâng cao sự hấp dẫn trực quan bằng thanh trượt và hình ảnh động.
  • Tiết kiệm dung lượng: Nếu bạn có khoảng 20 hình ảnh muốn hiển thị trên trang web của mình, chúng có thể chiếm rất nhiều dung lượng. Việc tạo một thanh trượt sẽ tiết kiệm dung lượng mà vẫn cho phép người dùng truy cập vào tất cả chúng.
  • Hiển thị nội dung động: Bạn có thể sử dụng thanh trượt để hiển thị nội dung động như phương tiện truyền thông xã hội, blog và tin tức được nhúng.

Điều kiện tiên quyết để tạo thanh trượt hình ảnh

  • Hiểu biết cơ bản về HTML: Ở đây chúng tôi sẽ mô tả cấu trúc của thanh trượt. Bạn sẽ cảm thấy thoải mái khi làm việc với nhiều thẻ, lớp và div HTML khác nhau.
  • Hiểu biết cơ bản về CSS: Chúng ta sẽ sử dụng CSS để tạo kiểu cho các thanh trượt và nút đồ họa của mình.
  • Hiểu biết cơ bản về JavaScript: Chúng tôi sẽ sử dụng JavaScript để làm cho thanh trượt hình ảnh phản hồi nhanh.
  • Trình soạn thảo mã: Bạn có thể sử dụng trình soạn thảo mã mà bạn chọn. Tôi sẽ sử dụng Visual Studio Code.
  • Một bộ sưu tập các hình ảnh.

Cấu hình thư mục dự án

Chúng ta cần thư mục dự án, thư mục hình ảnh bên trong nó và các tệp HTML, CSS và JavaScript. Tôi sẽ đặt tên cho dự án của mình là “Image-Slider”. Bạn có thể tạo dự án theo cách thủ công hoặc sử dụng các lệnh này để bắt đầu;

thanh trượt hình ảnh mkdir

CD thanh trượt hình ảnh

mkdir Hình ảnh && tap index.html style.css script.js

Thêm tất cả hình ảnh của bạn vào thư mục “Hình ảnh” mà chúng tôi đã tạo trong thư mục dự án của bạn và tiến hành bước tiếp theo.

Đây là thư mục dự án của tôi, nơi tôi đã thêm sáu hình ảnh mà tôi sẽ sử dụng để tạo thanh trượt. Tất cả mã HTML của chúng tôi sẽ nằm trong tệp index.html.

Các loại thanh trượt hình ảnh

Chúng ta có thể có hai loại thanh trượt hình ảnh; thanh trượt tự động và thanh trượt hình ảnh tự động bằng các nút.

# 1. Thanh trượt hình ảnh tự động

Thanh trượt Tự động tự động cuộn đến hình ảnh tiếp theo sau một khoảng thời gian nhất định, ví dụ: 3 giây.

Mã HTML

Đây là mã HTML của tôi;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
  <div id="slider">
    <div class="slide">
        <h1>African</h1>
      <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h1>American</h1>
      <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h1>Asian</h1>
      <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h1>Arabic</h1>
      <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h1>Modern </h1>
      <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h1> European </h1>
      <img src="Images/img6.jpg" >
    </div>
  </div>

  <script src="script.js"></script>


</body>
</html>

Từ mã này, chúng ta có thể nhận thấy những điều sau;

  • Tôi đã nhập tệp CSS của mình vào tệp index.html ở định dạng . Điều này sẽ được sử dụng trong các bước sau.
  • Tôi đã thêm JavaScript vào HTML của mình ngay trước thẻ đóng. Tôi sẽ sử dụng JavaScript để thêm chức năng cho thanh trượt.
  • Mỗi slide có một lớp slide.
  • Tôi đã sử dụng thẻ để nhập hình ảnh từ thư mục Hình ảnh.

Tạo kiểu cho thanh trượt hình ảnh tự động bằng CSS

Bây giờ chúng ta có thể tạo kiểu cho hình ảnh của mình vì chúng ta đã kết hợp các tệp CSS và HTML.

Thêm mã này vào tệp CSS của bạn;

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: 80%;
  }
  
  .slide.active {
    display: block;
  }

Từ mã này, chúng ta có thể nhận thấy những điều sau;

  • Chúng tôi có chiều rộng và chiều cao của thanh trượt lên tới 80%
  • Chúng ta đã thiết lập khóa slide đang hoạt động, nghĩa là chỉ slide đang hoạt động mới được hiển thị còn những slide khác sẽ bị ẩn.

Cách thêm JavaScript để thanh trượt hình ảnh phản hồi nhanh

Thêm mã này vào tệp script.js của bạn;

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
  slides[currentSlide].className="slide";
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className="slide active";
}

JavaScript này thực hiện như sau;

  • Chúng tôi sử dụng document.querySelectorAll để nhắm mục tiêu tất cả các thành phần có lớp slide.
  • Chúng tôi đưa ra giá trị ban đầu currentSlide 0.
  • Chúng tôi đặt slideInterval thành 2000 (2 giây) có nghĩa là hình ảnh trong thanh trượt thay đổi mỗi lần 2 giây.
  • Mã này đang trượt[currentSlide].className=”slide’; xóa lớp đang hoạt động khỏi slide hiện tại
  • Mã này currentSlide = (currentSlide + 1) % slide.length; tăng chỉ số trượt hiện tại.
  • Mã này đang trượt[currentSlide].className = “active slide” thêm lớp đang hoạt động vào slide hiện tại.

Thanh trượt tự động hoạt động như sau;

#2. Thanh trượt tự động với các nút

Thanh trượt hình ảnh mà chúng tôi đã tạo sẽ tự động cuộn mỗi 2 giây. Bây giờ chúng tôi có thể tạo một hình ảnh trong đó người dùng có thể chuyển sang trang chiếu tiếp theo bằng cách nhấp vào nút hoặc tự động cuộn từng trang. 3 giây nếu người dùng không bấm vào nút.

Mã HTML

Bạn có thể thay đổi nội dung của tệp index.html như sau;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css" />
  </head>
  <body>
    <div class="container">

        <div class="mySlides">
            <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
        </div>
      
        <div class="mySlides">
            <img src="Images/img2.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img3.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img4.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img5.jpg" style="width:100% ; height:50vh">
        </div>
      
      
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      
        <div class="caption-container">
          <p id="caption"></p>
        </div>
      
        <div class="row">
          <div class="column">
            <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
          </div>
          
        </div>
      </div>

    <script src="script.js"></script>
  </body>
</html>

Mã HTML này hoạt động như sau;

  • Chúng tôi có một lớp tên là mySlides chứa năm hình ảnh của chúng tôi.
  • Chúng tôi có hai nút “trước” và “tiếp theo” với onClick, cho phép người dùng cuộn qua các trang trình bày.
  • Chúng tôi có một hình thu nhỏ hiển thị hình ảnh ở cuối trang web.

Mã CSS

Thêm mã này vào mã của bạn;

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  justify-content: center;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: orangered;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

Mã CSS hoạt động như sau;

  • Chúng tôi đặt thuộc tính hiển thị của lớp .mySlides thành không có, có nghĩa là tất cả các trang chiếu đều bị ẩn theo mặc định.
  • Chúng tôi đã đặt độ mờ của hình thu nhỏ mà chúng tôi di chuột tới 1theo quy tắc hoạt động .demo:hover {opacity: 1;}.

Mã JavaScript

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

let slideInterval = setInterval(() => {
  plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 3000);
});

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Bạn có thể tải xuống mã nguồn cuối cùng tại đây.

Mã JavaScript của chúng tôi thực hiện như sau;

  • Chúng ta có hàm currentSlide với giá trị hiển thị được đặt thành không. Quy tắc này cho phép trang web của chúng tôi chỉ hiển thị slide hiện tại.
  • Chúng tôi có hàm plusSlides để cộng/trừ giá trị đã cho khỏi slideIndex để xác định slide nào sẽ hiển thị.
  • Nếu người dùng không nhấp vào nút, các slide sẽ tự động cuộn sau mỗi 3000 mili giây.

Nếu người dùng đang sử dụng tab điều hướng, thanh trượt hình ảnh của chúng tôi sẽ hoạt động như sau;

Nếu người dùng không sử dụng các nút điều hướng, thanh trượt hình ảnh sẽ tự động cuộn mỗi lần 3 giây như sau;

Kiểm tra và gỡ lỗi thanh trượt hình ảnh

Lỗi và sai sót là một phần trong hành trình của một lập trình viên và sự hiện diện của chúng trong mã của bạn không có nghĩa là bạn là một nhà phát triển tồi. Nếu mã của bạn không hoạt động ngay cả sau khi làm theo các bước trên, bạn có thể thử các tùy chọn kiểm tra và gỡ lỗi sau để sửa lỗi:

  • Gỡ lỗi từng tệp riêng biệt: Mã của chúng tôi bao gồm ba tệp: tệp HTML, CSS và JavaScript. Ba ngôn ngữ có quy tắc khác nhau. Bạn có thể xác minh rằng mã HTML, CSS và JavaScript của mình hợp lệ bằng cách sử dụng các công cụ như Dịch vụ xác thực đánh dấu W3C cho HTML, Trình xác thực CSS cho mã CSS và Chrome DevTools để kiểm tra mã JavaScript.
  • Thực hiện các loại kiểm tra khác nhau: Bạn có thể thực hiện kiểm tra trực quan để đảm bảo hình ảnh hiển thị chính xác, kiểm tra hiệu suất để xác minh rằng hình ảnh phản hồi và kiểm tra chức năng để đảm bảo rằng hình ảnh có thể điều hướng được.
  • Kiểm tra mã của bạn với các định dạng và kích thước hình ảnh khác nhau: Thanh trượt hình ảnh tốt sẽ hoạt động với nhiều định dạng và kích thước hình ảnh khác nhau.
  • Tự động hóa các thử nghiệm của bạn: Tự động hóa có ở khắp mọi nơi và bạn cũng có thể tận dụng nó trong quá trình thử nghiệm của mình. Bạn có thể sử dụng các công cụ như Selenium hoặc LoadRunner để viết và thực thi các tập lệnh tự động hóa thử nghiệm. Những công cụ này cũng cho phép bạn sử dụng lại một số bài kiểm tra.
  • Ghi lại các bài kiểm tra của bạn: Kiểm tra là một quá trình liên tục. Bạn có thể cần tiếp tục cải thiện các bài kiểm tra của mình cho đến khi mã của bạn hoạt động như mong đợi. Ghi lại quá trình này để làm cho mã của bạn có thể đọc được và có thể tham khảo được.

Thanh trượt hình ảnh: các phương pháp hay nhất

  • Giữ nó đơn giản: thanh trượt rất hấp dẫn. Tuy nhiên, hãy giữ số lượng hình ảnh trong thanh trượt ở mức thấp. Cái gì đó như 4-7 hình ảnh trên mỗi slide là hoàn hảo.
  • Kiểm tra thanh trượt của bạn: kiểm tra chức năng của chúng trước khi xuất bản lên web.
  • Làm cho thanh trượt phản hồi: Đảm bảo thanh trượt bạn tạo phản hồi với các kích thước màn hình khác nhau.
  • Sử dụng hình ảnh chất lượng cao: chụp/tải xuống hình ảnh chất lượng cao cho thanh trượt của bạn. Lưu hình ảnh ở định dạng SVG là một cách tiếp cận tuyệt vời vì chúng không bị giảm chất lượng khi bạn thay đổi kích thước.
  • Thay đổi kích thước hình ảnh: Bạn có thể có các kích thước và định dạng hình ảnh khác nhau. Luôn đảm bảo hình ảnh trong thanh trượt có cùng kích thước. Bạn có thể đạt được điều này bằng CSS.

Bản tóm tắt

Chúng tôi hy vọng giờ đây bạn có thể tạo một thanh trượt hình ảnh đầy đủ chức năng để hiển thị dữ liệu quan trọng trên trang web của mình mà không cần sử dụng khung giao diện người dùng. Bạn có thể sử dụng phương pháp tương tự để tạo thanh trượt video cho trang web.

Khuyến Khích: