Tôi chắc rằng bạn đã thấy Thanh trượt hình ảnh tự động hoặc Hiệu ứng trình chiếu trên nhiều trang web. Trình chiếu là phần trình bày một loạt hình ảnh tĩnh trên màn hình chiếu hoặc thiết bị hiển thị điện tử, thường theo trình tự được sắp xếp trước. Những thay đổi của hình ảnh có thể là tự động và đều đặn hoặc chúng có thể được điều khiển thủ công bởi người thuyết trình hoặc người xem

Hôm nay trong blog này mình sẽ chia sẻ thanh trượt hình ảnh tự động. Trong thanh trượt này có 5 hình ảnh và các hình ảnh này sẽ tự động thay đổi sau một khoảng thời gian nhất định. Tôi đã sử dụng JavaScript để thay đổi hình ảnh sau một khoảng thời gian nhất định. Nếu bạn không biết JavaScript thì bạn có thể xem video này nơi tôi đã tạo Thanh trượt hình ảnh tự động trong HTML & CSS

Video hướng dẫn Thanh trượt hình ảnh tự động trong HTML CSS

 
Trong video, bạn đã thấy thanh trượt hình ảnh tự động này trông như thế nào và tôi hy vọng bạn đã hiểu các mã cơ bản đằng sau việc tạo thanh trượt hình ảnh này. Như bạn đã biết, tôi đã sử dụng JavaScript để hoàn thành hiệu ứng trình chiếu này. Sử dụng thuộc tính CSS @keyframes, bạn cũng có thể tạo loại hiệu ứng trình chiếu hình ảnh này.

Nếu bạn thích thanh trượt hình ảnh tự động này và muốn lấy mã nguồn. Bạn có thể dễ dàng sao chép mã từ các hộp mã sao chép nhất định cũng như bạn có thể tải xuống các tệp mã nguồn. Bạn có thể sử dụng thanh trượt hình ảnh này trên các trang web và dự án của mình

Thanh trượt hình ảnh tự động trong HTML CSS [Mã nguồn]

Để tạo chương trình Tự động này (Hiệu ứng trình chiếu ảnh). Đầu tiên bạn cần tạo 2 File một File HTML và một File CSS. Sau khi tạo các tệp này, chỉ cần dán các mã sau vào tệp của bạn. Đầu tiên, tạo một tệp HTML với tên của chỉ mục. html và dán mã đã cho vào tệp HTML của bạn. Hãy nhớ rằng, bạn phải tạo một tệp với. phần mở rộng html

Thứ hai, tạo một tệp CSS với tên kiểu. css và dán các mã đã cho vào tệp CSS của bạn. Hãy nhớ rằng, bạn phải tạo một tệp với. phần mở rộng css

body{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.content{
  height: 400px;
  width: 750px;
  overflow: hidden;
  box-shadow: 1px 1px 15px rgba(0,0,0,0.4);
}
.content .images{
  height: 100%;
  width: 100%;
}
.images img{
  height: 100%;
  width: 100%;
}

Vậy là xong, bây giờ bạn đã tạo thành công Thanh trượt hình ảnh tự động trong HTML CSS & JavaScript. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ lỗi/sự cố nào, vui lòng tải xuống các tệp mã nguồn từ nút tải xuống đã cho. Nó miễn phí và một. zip sẽ được tải xuống sau đó bạn giải nén nó

Xin chào các bạn, hôm nay tôi sẽ hướng dẫn các bạn cách tạo thanh trượt hình ảnh tự động trong Html css, trong bài viết này, bạn sẽ tìm hiểu cách tạo một slideshow CSS tuyệt vời với hiệu ứng mờ dần

Trình chiếu hình ảnh là tùy chọn tốt nhất để thể hiện nhiều hình ảnh trên một trang web. Trên trang web, thanh trượt hình ảnh tự động phát có giá trị riêng. trong bài viết này, chúng ta sẽ tạo một thanh trượt hình ảnh tự động đáp ứng đơn giản bằng cách sử dụng html và css

Slideshow trong Html là gì?

Nói tóm lại, trình chiếu là cách trình bày hình ảnh hoặc văn bản trượt liên tục từ trang chiếu này sang trang chiếu khác để hiển thị nội dung của nó

Cách tạo thanh trượt hình ảnh tự động trong Html Css từng bước

Bước 1 — Tạo một dự án mới

Trong bước này, chúng ta cần tạo một thư mục dự án mới và các tệp (chỉ mục. html, phong cách. css) để tạo thanh trượt hình ảnh tự động tuyệt vời trong html css. Trong bước tiếp theo, chúng tôi sẽ bắt đầu tạo cấu trúc của trang web

Bạn cũng có thể thích những điều này

• GSAP Animated Carousel Slider
• Thanh trượt đàn accordion với hoạt ảnh nền

Bước 2 — Thiết lập cấu trúc cơ bản

Trong bước này, chúng tôi sẽ thêm mã HTML để tạo cấu trúc cơ bản của dự án

Đây là cấu trúc cơ sở của hầu hết các trang web sử dụng HTML

Thêm đoạn mã sau vào trong thẻ

Bước 3 - Thêm kiểu cho các lớp

Trong bước này, chúng ta sẽ thêm các kiểu vào lớp phần Kiểu bên trong. tập tin css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.slowFade {
    display: flex;
    align-items: flex-start;
    background: #fff;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.slowFade .slide img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    background: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    opacity: 0;
    transform: scale(1.5) rotate(15deg);
    -webkit-animation: slowFade 32s infinite;
            animation: slowFade 32s infinite;
}
.slowFade .slide:nth-child(3) img {
    -webkit-animation-delay: 8s;
            animation-delay: 8s;
}
.slowFade .slide:nth-child(2) img {
    -webkit-animation-delay: 16s;
            animation-delay: 16s;
}
.slowFade .slide:nth-child(1) img {
    -webkit-animation-delay: 24s;
            animation-delay: 24s;
}
@keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}

@-webkit-keyframes slowFade {
    25% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    40% {
        opacity: 0;
    }
}

#Kết quả cuối cùng

Nếu bạn muốn mã nguồn, bạn có thể tải xuống từ nút bên dưới

Tải xuống mã

Bộ sưu tập thanh trượt hình ảnh tự động tốt nhất

Trong bộ sưu tập này, tôi đã liệt kê 10 ví dụ trình chiếu hoạt hình hàng đầu. Kiểm tra các hiệu ứng trượt hình ảnh tuyệt vời này như. #1Thanh trượt hình ảnh CSS đáp ứng,  #2Thanh trượt hình ảnh CSS thuần túy, #3Thanh trượt hình ảnh CSS mờ dần hoạt hình, và nhiều hơn nữa

#1 Thanh trượt hình ảnh CSS đáp ứng

Thanh trượt hình ảnh CSS đáp ứng, được phát triển bởi Dudley Storey. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#2 Thanh trượt hình ảnh CSS thuần túy

Pure CSS Image Slider, được phát triển bởi alphardex. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#3 Thanh trượt hình ảnh mờ dần CSS hoạt hình

Thanh trượt hình ảnh làm mờ CSS hoạt hình, được phát triển bởi Rüdiger Alte. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#4 Thanh trượt hình ảnh CSS có điều hướng

CSS Image Slider With Nav, được phát triển bởi Oskari Heinonen. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#5 Trình chiếu crossfading CSS thuần túy

Trình chiếu crossfading CSS thuần túy do Mark Lee phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#6 Hiển thị mờ CSS

CSS Fadeshow do Alexander Erlandsson phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#7 Thư viện trình chiếu với CSS

Thư viện trình chiếu có CSS, được phát triển bởi Roko C. Buljan. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#8 Trình chiếu CSS đơn giản nhất

Trình chiếu CSS đơn giản nhất do Ginobi-Wan phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#9 Trình chiếu động sử dụng HTML & CSS

Trình chiếu động sử dụng HTML & CSS, được phát triển bởi Waterplea. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

#10 Trình chiếu đàn accordion CSS3

Trình chiếu CSS3 Accordion do George Nemes phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn

Làm cách nào để tự động phát thanh trượt trong CSS?

(with Autoplay at the beginning)