Cách tạo slideshow chỉ với HTML và CSS

Trình chiếu web là một chuỗi hình ảnh hoặc văn bản bao gồm hiển thị một thành phần của chuỗi trong một khoảng thời gian nhất định

Đối với hướng dẫn này, bạn có thể tạo trình chiếu bằng cách làm theo các bước đơn giản sau

Viết một số đánh dấu

Viết kiểu để ẩn trang chiếu và chỉ hiển thị một trang chiếu

Để ẩn các trang chiếu, bạn phải đặt cho chúng một kiểu mặc định. Nó sẽ ra lệnh rằng bạn chỉ hiển thị một trang chiếu nếu nó đang hoạt động hoặc nếu bạn muốn hiển thị nó

  [data-component="slideshow"] .slide {
    display: none;
  }

  [data-component="slideshow"] .slide.active {
    display: block;
  }

Thay đổi các slide trong một khoảng thời gian

Bước đầu tiên để thay đổi các trang chiếu nào sẽ hiển thị là chọn (các) trình bao bọc trang chiếu và sau đó chọn các trang chiếu của nó

Khi bạn chọn các trang chiếu, bạn phải đi qua từng trang chiếu và thêm hoặc xóa một lớp đang hoạt động tùy thuộc vào trang chiếu mà bạn muốn hiển thị. Sau đó, chỉ cần lặp lại quy trình trong một khoảng thời gian nhất định

Hãy nhớ rằng khi bạn xóa một lớp đang hoạt động khỏi một trang chiếu, bạn đang ẩn lớp đó do các kiểu được xác định ở bước trước. Nhưng khi bạn thêm một lớp đang hoạt động vào trang chiếu, bạn sẽ ghi đè lên kiểu display:none to display:block , vì vậy trang chiếu sẽ hiển thị cho người dùng

  var slideshows = document.querySelectorAll('[data-component="slideshow"]');
  
  // Apply to all slideshows that you define with the markup wrote
  slideshows.forEach(initSlideShow);

  function initSlideShow(slideshow) {

    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides

    var index = 0, time = 5000;
    slides[index].classList.add('active');  
    
    setInterval( () => {
      slides[index].classList.remove('active');
      
      //Go over each slide incrementing the index
      index++;
      
      // If you go over all slides, restart the index to show the first slide and start again
      if (index === slides.length) index = 0; 
      
      slides[index].classList.add('active');

    }, time);
  }

Ví dụ về Codepen theo hướng dẫn này

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Image Slider hay Image Carousel là một cách để hiển thị nhiều hình ảnh trang web. Hình ảnh lạ mắt có thể thu hút rất nhiều khách truy cập vào trang web

Thông thường, thanh trượt hình ảnh được tạo với sự trợ giúp của JavaScript, nhưng với việc phát hành CSS3, điều này cũng có thể được thực hiện bằng cách sử dụng CSS3 thuần túy. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo hiệu ứng trình chiếu với mã CSS tối thiểu và trong phần thứ hai của bài viết, chúng ta sẽ xem xét các cách tạo thanh trượt hình ảnh bằng JavaScript. Vì vậy, chúng ta hãy đến với cuộc thảo luận của họ dưới đây

Có thể bạn đã từng thấy các thanh trượt nặng nề dựa trên JavaScript. Những thanh trượt như vậy làm cho trang web chậm hơn và cũng bị lỗi nếu người dùng đã tắt tính năng giải thích JavaScript trong trình duyệt. Không sử dụng các thanh trượt này là một giải pháp cho vấn đề này, nhưng bạn sẽ triển khai thanh trượt như thế nào nếu không có JavaScript?

  
    Slideshow Images
    
  
  
    

      
      
      
      

        

        

        

      

      

        
        
        
      




    

  
    Image Slider
    
  
  
    
    

      

        This is a proof-of-concept for a slideshow that doesn't use any Javascript. It does not have pages or left/right buttons etc.
      
    

  

Dưới đây xem một ví dụ trong đó hình nền được thiết lập để hoạt động giống như thanh trượt

  
    Image Slider
    
  
  
    

      

        
        
        
      
      
      
      
      
      
      
    

Một thanh trượt thường có một giao diện người dùng nhỏ để chuyển đến một trang chiếu cụ thể, vì vậy, hãy làm điều đó theo ngữ nghĩa, với các liên kết neo chuyển đến trang chiếu chính xác

Tạo các liên kết nhảy của bạn bằng cách sử dụng thẻ neo. Thêm một chút kiểu dáng và nhận một số nút

Để đảm bảo rằng bạn sẽ có được hiệu ứng trượt mượt mà trên cả máy tính để bàn và thiết bị di động, hãy thêm thuộc tính scroll-behavior với giá trị "smooth" của nó. Sau đó, sử dụng. nhắm mục tiêu lớp giả cho một cái gì đó đặc biệt cho slide "hoạt động". Nhấp vào một trong các nút điều hướng trang chiếu sẽ thay đổi URL thành hàm băm # và đó là lúc. mục tiêu có hiệu lực

Điều đầu tiên bạn nên làm là tạo cấu trúc của thanh trượt hình ảnh bằng HTML và đặt hình ảnh

Sau khi bạn đã tạo cấu trúc HTML cho thanh trượt hình ảnh của mình, bước tiếp theo là sử dụng các kiểu CSS để có giao diện cho thanh trượt của bạn. Ngoài ra, thêm phong cách cho hình ảnh, hình nền, v.v. Bạn cũng cần tạo kiểu cho các dấu chấm và làm cho hình ảnh của bạn phản hồi nhanh và thân thiện với trình duyệt bằng các thuộc tính CSS

Bây giờ, đã đến lúc thêm phần JavaScript để cung cấp chức năng làm cho hình ảnh tự động thay đổi sau một khoảng thời gian cụ thể

Làm cách nào để tạo băng chuyền bằng CSS và HTML?

Làm cách nào để tạo nhiều thanh trượt hình ảnh trong HTML và CSS?