Thanh trượt thích ứng không có javascript trên css3. Thanh trượt thời trang thích ứng. Thanh trượt css3 thay thế dựa trên hiệu ứng hoạt hình

Bộ sưu tập miễn phí Thanh trượt HTML và CSS ví dụ mã: thẻ, so sánh, toàn màn hình, đáp ứng, đơn giản, vân vân. Cập nhật bộ sưu tập tháng 3 năm 2018. 2 món mới.

Mục lục

Những bài viết liên quan

Về mã

Một tập hợp các màn hình giới thiệu bằng HTML/CSS/JS. Một thử nghiệm cá nhân với việc phân lớp các biểu tượng PNG, chuyển tiếp CSS3 và flexbox.

Thanh trượt thẻ thông tin HTML, CSS và JavaScript.
Thực hiện bởi Andy Trần
Ngày 23 tháng 11 năm 2015

Thanh trượt ảnh hoạt động trên trình duyệt máy tính để bàn và thiết bị di động.
Được thực hiện bởi Taron
Ngày 29 tháng 9 năm 2014

Thanh trượt so sánh (Trước/Sau)

Về mã

Một thanh trượt so sánh hình ảnh đơn giản và rõ ràng, hoàn toàn đáp ứng và sẵn sàng cho cảm ứng được tạo bằng CSS và jQuery.

Về mã

Thanh trượt trước và sau chỉ có html và css.

Về mã

Thử nghiệm một ý tưởng mới bằng cách sử dụng thanh trượt hình ảnh hai lớp trước/sau của tôi. Giữ nó ở mức tối thiểu. Giữ nó vani. Like nếu nó hữu ích :)

Vanilla JS, tối giản, đẹp mắt.
Được thực hiện bởi Huw
Ngày 3 tháng 7 năm 2017

Về mã

Phần tử thanh trượt "chia đôi màn hình" có JavaScript.

Một thử nghiệm nhỏ về thanh trượt trước và sau bên trong SVG. Việc tạo mặt nạ làm cho nó khá đơn giản. Vì tất cả đều là SVG nên hình ảnh và chú thích có tỷ lệ hài hòa với nhau. Các plugin Draggable và ThrowProps của GreenSock được sử dụng để điều khiển thanh trượt.
Được thực hiện bởi Craig Roblewsky
Ngày 17 tháng 4 năm 2017

Sử dụng đầu vào phạm vi tùy chỉnh cho thanh trượt.
Được thực hiện bởi Dudley Storey
Ngày 14 tháng 10 năm 2016

Thanh trượt so sánh hình ảnh đáp ứng với HTML, CSS và JavaScript.
Được thực hiện bởi Ege Görgülü
Ngày 3 tháng 8 năm 2016

Thanh trượt so sánh trước và sau video HTML5, CSS3 và JavaScript.
Được thực hiện bởi Dudley Storey
Ngày 24 tháng 4 năm 2016

Một thanh trượt có thể kéo tiện dụng để so sánh nhanh 2 hình ảnh, được hỗ trợ bởi CSS3 và jQuery.
Được thực hiện bởi CodyHouse
Ngày 15 tháng 9 năm 2014

Thanh trượt toàn màn hình

Về mã

Hiệu ứng chuyển tiếp đẹp mắt cho thanh trượt toàn màn hình.

Về mã

Thanh trượt thị sai ngang với Swiper.js.

Về mã

Thanh trượt phối cảnh 3D mượt mà đáp ứng khi di chuyển chuột.

Thanh trượt hình ảnh anh hùng toàn màn hình (chủ đề bảng vuốt) với HTML, CSS và JavaScript.
Được thực hiện bởi Tobias Bogliolo
Ngày 25 tháng 6 năm 2017

Một thứ tương tác với thanh trượt sử dụng hiệu ứng Vận tốc và Vận tốc (Gói UI) để nâng cao hoạt ảnh. Hoạt ảnh được kích hoạt thông qua các phím mũi tên, nhấp chuột điều hướng hoặc giắc cuộn. Phiên bản này bao gồm các đường viền như một phần của sự tương tác.
Được thực hiện bởi Stephen Scaff
Ngày 11 tháng 5 năm 2017

Thanh trượt đơn giản theo phong cách tối giản để hiển thị hình ảnh. Một phần hình ảnh hiện ra trên mỗi slide.
Được thực hiện bởi Nathan Taylor
Ngày 22 tháng 1 năm 2017

Điều này là khá dễ dàng tùy chỉnh. Bạn có thể thay đổi phông chữ, cỡ chữ một cách an toàn, màu chữ, tốc độ hoạt hình. Chữ cái đầu tiên của chuỗi mới trong mảng trong JS sẽ xuất hiện trên một slide mới. Dễ dàng tạo (hoặc xóa) một slide mới: 1. Thêm thành phố mới vào mảng trong JS. 2. Thay đổi số lượng slide và đặt một hình ảnh mới vào danh sách scss trong CSS.
Được thực hiện bởi Ruslan Pivovarov
Ngày 8 tháng 10 năm 2016

1. Đường dẫn clip cho đường viền hình chữ nhật che hình ảnh (chỉ dành cho webkit).
2. Chế độ hòa trộn cho mặt nạ này.
3. Hệ thống màu thông minh, chỉ cần đặt tên và giá trị màu của bạn vào bản đồ sass, sau đó thêm lớp thích hợp có tên màu này vào các phần tử và mọi thứ sẽ hoạt động!
4. Menu bên các khoản tín dụng thú vị (nhấp vào nút nhỏ ở giữa bản demo).
5. Vanilla js chỉ với< 200 lines of code (basically it’s just adds/removes classes).

Được thực hiện bởi Nikolay Talanov
Ngày 7 tháng 10 năm 2016

Thanh trượt lệch này có chức năng cuộn dựa trên JS và CSS thuần túy (không có thư viện).
Được thực hiện bởi Victor Belozyorov
Ngày 3 tháng 9 năm 2016

Một hình ảnh động thanh trượt với thiết kế Pokemon.
Thực hiện bởi Phạm Mikun
Ngày 18 tháng 8 năm 2016

Thanh trượt HTML, CSS và JavaScritp với hình ảnh động phức tạp và văn bản góc cạnh được tô màu một nửa.
Được thực hiện bởi Ruslan Pivovarov
Ngày 13 tháng 7 năm 2016

Hiệu ứng thị sai thanh trượt với HTML, CSS và JavaScript.
Được thực hiện bởi Manuel Madeira
Ngày 28 tháng 6 năm 2016

Thanh trượt HTML, CSS và JavaScript với hiệu ứng gợn sóng.
Được thực hiện bởi Pedro Castro
Ngày 21 tháng 5 năm 2016

Thanh trượt hiển thị đường dẫn clip với HTML, CSS và JavaScript.
Được thực hiện bởi Nikolay Talanov
Ngày 16 tháng 5 năm 2016

GSAP + Thanh trượt mượt mà với bản xem trước của các slide trước/tiếp theo.
Được thực hiện bởi Karlo Videk
Ngày 27 tháng 4 năm 2016

Thanh trượt toàn trang HTML, CSS và JavaScript.
Được thực hiện bởi Joseph Martucci
Ngày 28 tháng 2 năm 2016

Nguyên mẫu thanh trượt đầy đủ với HTML, CSS và JavaScript.
Được thực hiện bởi Gluber Sampaio
Ngày 6 tháng 1 năm 2016

Một bản trình chiếu hoạt hình toàn màn hình, phản hồi nhanh với Greensocks TweenLite/Tweenmax.
Được thực hiện bởi Arden
Ngày 12 tháng 12 năm 2015

Được thực hiện bởi Arden
Ngày 5 tháng 12 năm 2015

Thanh trượt toàn màn hình (Dòng thời gian GSAP) #1 với HTML, CSS và JavaScript.
Được thực hiện bởi Diaco M.Lotfollahi
Ngày 23 tháng 11 năm 2015

Thanh trượt HTML và CSS với các hiệu ứng tùy chỉnh.
Được thực hiện bởi Nikolay Talanov
Ngày 12 tháng 11 năm 2015

Thanh trượt kéo toàn màn hình có thị sai với HTML, CSS và JavaScript.
Được thực hiện bởi Nikolay Talanov
Ngày 12 tháng 11 năm 2015

Bằng chứng về khái niệm thanh trượt xoay. Sử dụng đường dẫn clip và rất nhiều phép toán.
Được thực hiện bởi Tyler Johnson
Ngày 16 tháng 4 năm 2015

Thanh trượt CSS & jQuery toàn màn hình đơn giản sử dụng độ mượt của TranslateX và Translate3d!
Được thực hiện bởi Joseph
Ngày 19 tháng 8 năm 2014

Thanh trượt đáp ứng

Về mã

Hình ảnh và nội dung có hiệu ứng thị sai.

Về mã

Một thử nghiệm nhằm tạo một thanh trượt dọc hoàn toàn đáp ứng với hình thu nhỏ chỉ sử dụng CSS và giữ nguyên tỷ lệ khung hình của hình ảnh.

Về mã

Một thanh trượt/băng chuyền hình ảnh Flexbox đơn giản được tạo bằng JavaScript thuần.

Về mã

Đây là một thử nghiệm mô phỏng hiệu ứng chuyển động mờ mỗi khi chuyển một slide. Nó tận dụng bộ lọc SVG Gaussian Blur và một số hoạt ảnh khung hình chính CSS. Mặc dù hiệu ứng này không yêu cầu bất kỳ Javascript nào để hoạt động bình thường nhưng trong ví dụ này, Javascript chỉ được sử dụng cho chức năng thanh trượt.

Về mã

Thanh trượt hoạt hình thú vị với JS.

Về mã

Đây là thử nghiệm về cách các mẫu SVG có thể giúp chúng tôi tạo ra các hình ảnh giống như mặt nạ cho thanh trượt hình ảnh chỉ có CSS.

Khám phá một số chuyển tiếp thanh trượt. Thanh trượt vuốt có bật tùy chọn thị sai. Chơi với các bộ lọc CSS chủ yếu ở đây.
Được thực hiện bởi Mirko Zorić
Ngày 12 tháng 6 năm 2017

Thanh trượt GSAP đơn giản với một số hình ảnh động tinh tế.
Được thực hiện bởi Goran Vrban
Ngày 9 tháng 6 năm 2017

Giao diện người dùng thanh trượt với HTML, CSS và JavaScript.
Được thực hiện bởi Mergim Ujkani
Ngày 6 tháng 6 năm 2017

Thanh trượt GSAP phiên bản 2.
Em An thực hiện
Ngày 4 tháng 5 năm 2017

Một thanh trượt chuyển tiếp nhỏ gọn bằng cách sử dụng thỏa thuận thêm lớp đơn giản. Phải điều chỉnh thời gian một chút và quyết định cách tiếp cận tốt nhất cho thiết bị di động (chỉ cần xếp chồng, thêm sự kiện chạm, tạo hình ảnh ở chế độ xem đầy đủ, v.v. Hỗ trợ con lăn (giắc cuộn), nút điều hướng và phím mũi tên. Cũng có thể tăng trình bao bọc nội dung để làm cho hình ảnh lấp đầy khung nhìn ở trạng thái không hoạt hình, điều này cũng khá thú vị.
Được thực hiện bởi Stephen Scaff
Ngày 3 tháng 1 năm 2017

Tận dụng đường viền CSS và đường dẫn clip để tạo hiệu ứng hoạt ảnh thanh trượt.
Được thực hiện bởi Emily Hayman
Ngày 31 tháng 12 năm 2016

Thanh trượt nhỏ được xây dựng bằng flexbox. Hơi phản hồi nhanh và có thể có các phần tử cố định dọc theo khu vực thanh trượt.
Được thực hiện bởi Robert
Ngày 28 tháng 11 năm 2016

Thanh trượt canvas HTML, CSS.
Được thực hiện bởi Nvagelis
Ngày 29 tháng 10 năm 2016

Thanh trượt mượt mà HTML, CSS và JavaScript 3D.
Được thực hiện bởi Eduardo Allegrini
Ngày 19 tháng 10 năm 2016

Thanh trượt cupcake HTML và CSS có rắc!
Được thực hiện bởi Jamie Coulter
Ngày 14 tháng 10 năm 2016

Được thực hiện bởi mario s maselli
Ngày 12 tháng 10 năm 2016

Khám phá hoạt ảnh UI #2 bằng HTML, CSS và JavaScript.
Được thực hiện bởi mario s maselli
Ngày 22 tháng 9 năm 2016

Khám phá hoạt ảnh UI #3 bằng HTML, CSS và JavaScript.
Được thực hiện bởi mario s maselli
Ngày 22 tháng 9 năm 2016

Thanh trượt thương mại điện tử v2.0 với HTML, CSS và JavaScript.
Được thực hiện bởi Pedro Castro
Ngày 17 tháng 9 năm 2016

Thanh trượt sạch HTML, CSS và JavaScript với nền cong.
Được thực hiện bởi Ruslan Pivovarov
Ngày 13 tháng 9 năm 2016

Khám phá hoạt ảnh UI số 1 bằng HTML, CSS và JavaScript.
Được thực hiện bởi mario s maselli
Ngày 8 tháng 9 năm 2016

Tận hưởng sức mạnh của CSS: Lên xuống từng hình ảnh ở giữa và thanh trượt phân trang bằng hộp đèn.
Được thực hiện bởi Kseso
Ngày 15 tháng 8 năm 2016

Phơi sáng kép là kỹ thuật chụp ảnh kết hợp 2 ảnh khác nhau thành một ảnh duy nhất.
Được thực hiện bởi Misaki Nakano
Ngày 3 tháng 8 năm 2016

Thanh trượt sử dụng clip thuộc tính CSS3.
Được thực hiện bởi Pedro Castro
Ngày 1 tháng 5 năm 2016

Thanh trượt CSS đáp ứng.
Được thực hiện bởi geekwen
Ngày 19 tháng 4 năm 2016

Đây là một thử nghiệm thanh trượt đơn giản hiển thị các từ có ý nghĩa đẹp mà không thể dịch trực tiếp. Trọng tâm: kiểu chữ trang nhã và các chuyển tiếp đơn giản nhưng lôi cuốn.
Được thực hiện bởi Joe Harry
Ngày 5 tháng 4 năm 2016

Ý tưởng hoạt hình là thay đổi giá trị của đường dẫn clip CSS, do đó tạo hiệu ứng che lấp.
Được thực hiện bởi Bhakti Al Akbar
Ngày 31 tháng 3 năm 2016

Thanh trượt chấm với HTML, CSS và JavaScript.
Thực hiện bởi Derek Nguyễn
Ngày 16 tháng 3 năm 2016

Thanh trượt hiệu ứng lăng kính với HTML, CSS và JavaScript.
Được thực hiện bởi người chiến thắng
Ngày 12 tháng 3 năm 2016

Thư viện nền trượt với HTML, CSS và JavaScript.
Được thực hiện bởi Ron Gierlach
Ngày 30 tháng 11 năm 2015

Giải pháp thanh trượt HTML, CSS và JavaScript.
Được thực hiện bởi Jürgen Genser
Ngày 30 tháng 9 năm 2015

Thanh trượt sản phẩm được cung cấp bởi Sequence.js. Sequence.js - Khung hoạt ảnh CSS đáp ứng để tạo các thanh trượt, bản trình bày, biểu ngữ độc đáo và các ứng dụng dựa trên bước khác.
Được thực hiện bởi Ian Lunn
Ngày 15 tháng 9 năm 2015

Thanh trượt tùy chỉnh vòng tròn nhỏ.
Được thực hiện bởi Bram de Haan
Ngày 11 tháng 8 năm 2015

Thanh trượt GTA V đáp ứng với HTML, CSS và JavaScript.
Được thực hiện bởi Eduard Mayer
Ngày 24 tháng 1 năm 2014

Nó giống như một thanh trượt nhưng nó xoay theo hình khối mà không rõ lý do.
Được thực hiện bởi Eric Brewer
Ngày 4 tháng 12 năm 2013

Được thực hiện bởi Hugo DarbyBrown
Ngày 28 tháng 8 năm 2013

Thanh trượt đơn giản

Thanh trượt lớp phủ hình ảnh với HTML, CSS và JavaScript thuần túy.
Được thực hiện bởi Yugam
Ngày 7 tháng 6 năm 2017

Thanh trượt hình ảnh đặc trưng của HTML và CSS.
Được thực hiện bởi Joshua Hibbert
Ngày 16 tháng 6 năm 2016

Về mã

Đơn giản nguyên chất được làm bằng

Thanh trượt tính năng với HTML, CSS và JavaScript.
Được thực hiện bởi Andy Lorimer
Ngày 23 tháng 10 năm 2015

Chỉ CSS.
Được thực hiện bởi Alberto Hartzet
Ngày 6 tháng 5 năm 2015

Các tính năng: - trình chiếu tự động - tạm dừng khi di chuột - bộ đếm slide động - hiển thị/ẩn các điều khiển khi di chuột.
Được thực hiện bởi André Cortellini
Ngày 14 tháng 8 năm 2014

Thanh trượt hình ảnh đa trục với HTML, CSS và JavaScript.
Được sản xuất bởi Burak Can
Ngày 22 tháng 7 năm 2013

Thanh trượt khối, một thử nghiệm nhỏ với các phép biến đổi 3d HTML5/CSS3.
Được thực hiện bởi Ilya K.
Ngày 26 tháng 6 năm 2013

Thanh trượt CSS có một số ưu điểm so với thanh trượt Javascript. Một trong những lợi ích này là tốc độ tải. Hình ảnh cho thanh trượt không chỉ được sử dụng ở kích thước lớn (nếu không có sự tối ưu hóa cho màn hình khác nhau), việc tải tập lệnh cũng mất một chút thời gian. Nhưng trong bài viết bạn sẽ chỉ thấy các thanh trượt sử dụng CSS thuần túy.

Đây là những gì tôi tìm thấy trên một trang web về thanh trượt:

1. Thanh trượt hình ảnh CSS3

Thanh trượt CSS sử dụng các nút radio để điều hướng các trang trình bày. Các nút radio này nằm dưới thanh trượt. Ngoài ra, ngoài các nút radio, việc điều hướng còn được thực hiện bằng các mũi tên ở bên trái và bên phải. Để theo dõi hình ảnh nào hiện đang được hiển thị, các lớp giả :checked được sử dụng.

2. Thanh trượt hình ảnh CSS3 có hình thu nhỏ

Không giống như thanh trượt CSS trước đây, ở đây thay vì các nút radio ở phía dưới, có hình thu nhỏ của tất cả các hình ảnh, điều này cũng thuận tiện khi tạo thư viện hình ảnh. Các hình ảnh thay đổi với một hiệu ứng đặc biệt: chúng biến mất một cách mượt mà khi phóng to.

3. Thư viện bằng CSS

Nhưng thanh trượt CSS này hoàn hảo cho các trang bán hàng. Theo quy định, khi phát triển trang đích (trang bán hàng), nhiều nhà phát triển web đặt một thanh trượt ngay từ đầu để trên màn hình đầu tiên (không cần cuộn), khách truy cập sẽ thấy ngay tất cả những lợi ích dành cho mình trên trang này. Ngoài mọi thứ, thanh trượt này còn có khả năng thích ứng, điều này cũng rất tuyệt.

4. Thanh trượt CSS không có liên kết

Mình xin lưu ý ngay là thanh trượt này không sử dụng link nhé! Theo mặc định, ngoài hình ảnh chính (slide) còn hiển thị thêm 2 slide nữa. Chúng nằm phía sau cái chính. Việc thay đổi các slide diễn ra ở chế độ đẹp mắt: đầu tiên, hai slide được di chuyển ra xa nhau và slide sau đó sẽ trở thành slide chính sẽ được căn giữa. Sau đó, slide này được phóng to và đặt ở phía trước những slide khác.

5. Thanh trượt đáp ứng bằng CSS3

Một thanh trượt thích ứng khác, việc điều khiển dựa trên các nút radio. Để xem thanh trượt này trông như thế nào trên các thiết bị khác nhau, bạn có thể tự thay đổi cửa sổ trình duyệt hoặc trên trang có thanh trượt có các biểu tượng đặc biệt cho các thiết bị khác nhau, bằng cách nhấp vào đó bạn sẽ thấy thanh trượt sẽ trông như thế nào trên máy tính , máy tính bảng hoặc điện thoại thông minh.

***TRƯỢT THƯỞNG***

Ngoài tất cả các thanh trượt được trình bày ở trên, tôi muốn làm hài lòng bạn thêm một thanh trượt nữa. Thanh trượt này hoàn hảo để tạo một thư viện hình ảnh. Bạn không thể giải thích bằng lời những gì anh ấy làm, vì vậy tốt hơn hết bạn nên xem mọi thứ trong video:

Phần kết luận

Sử dụng thanh trượt, bạn có thể thiết kế các thư viện hình ảnh đẹp mắt, đặt chúng gọn gàng hơn, chèn một thanh trượt vào màn hình đầu tiên (phần trang hiển thị mà không cần cuộn) của trang bán hàng để hiển thị ngay cho khách truy cập những lợi ích chính mà họ sẽ nhận được . Bạn vẫn có thể tìm thấy nhiều cách để sử dụng thanh trượt ở đâu và như thế nào, nhưng có một điều rõ ràng - chúng rất hữu ích khi sử dụng đúng cách.

Đang thực hiện một cuốn sách về câu đố, Tôi phải đối mặt với thực tế là nhiều người đăng ký đã yêu cầu tôi chỉ cho tôi cách viết một tập lệnh trượt trong jquery. Xin lỗi các bạn thân mến! Đây là thế kỷ 21 và may mắn thay cho chúng tôi, tất cả những điều thú vị của CSS3 đều có sẵn cho chúng tôi, cho phép chúng tôi triển khai những thứ như vậy mà không cần một dòng nào javascript.

Phần 1.

Để bắt đầu, tôi sẽ giải thích cho những ai chưa biết thanh trượt là gì. Thanh trượt- đây là một khối có chiều rộng nhất định chiếm một phần hoặc toàn bộ trang web. Tính năng chính của nó là nó thay đổi tự động hoặc chế độ thủ công nội dung. Nội dung có thể là hình ảnh đồ họa hoặc một số văn bản.

Tất nhiên, bạn có thể thắc mắc: tại sao phải phát minh lại bánh xe nếu có nhiều cách triển khai thanh trượt trong javascript? Đây là những lập luận của tôi:

1. Hiệu ứng CSS nhanh hơn. Điều này được thể hiện rõ ràng trên thiết bị di động.
2. Để tạo thanh trượt, không cần có kỹ năng lập trình.

Vì vậy, trong ví dụ của chúng tôi, bạn cần bốn hình ảnh, mặc dù trong dự án của bạn, bạn có thể tạo một dải có bao nhiêu hình ảnh tùy thích. Điều kiện duy nhất là tất cả các hình ảnh phải cùng cỡ. Ngoài ra, tôi quên nói với bạn, thanh trượt của chúng tôi sẽ thích ứng (vâng, Bố cục thích ứng, bạn đọc đúng rồi) và bạn có thể sử dụng nó trong bất kỳ dự án nào của mình cho bất kỳ thiết bị nào. Nhưng nói nhảm thế đủ rồi, tôi đã muốn viết mega-code rồi. Hãy bắt đầu với HTML:

Tôi để trống nó thuộc tính alt, để tiết kiệm dung lượng, bạn có thể tự điền thông tin dựa trên truy vấn SEO của mình và thông báo cho người dùng đã tắt hiển thị hình ảnh trong trình duyệt của họ. Tôi cũng muốn bạn chú ý đến thực tế là hình ảnh đầu tiên ( alladin.jpg) cũng sẽ xuất hiện ở cuối dải, điều này sẽ cho phép thanh trượt của chúng ta cuộn theo chu kỳ mà không bị giật.

Để thuận tiện, chiều rộng là 80% cửa sổ và chiều rộng tối đa là kích thước của từng ảnh riêng lẻ (trong ví dụ của chúng tôi là 1000px) vì chúng tôi không muốn hình ảnh bị kéo dài:

Thanh trượt ( chiều rộng: 80%; chiều rộng tối đa: 1000px; )

Trong mã CSS của chúng tôi, chiều rộng của hình được biểu thị bằng phần trăm của div nơi nó nằm. Nghĩa là, nếu dải hình ảnh chứa năm ảnh và div chỉ tạo ra một ảnh thì chiều rộng của hình sẽ tăng lên gấp 5 lần, tức là 500% chiều rộng của div vùng chứa:

Cài đặt cỡ chữ: 0 sẽ hút hết không khí ra khỏi hình, loại bỏ mọi khoảng trắng xung quanh và giữa các hình ảnh. vị trí: tương đối cho phép bạn dễ dàng di chuyển hình trong khi hoạt hình.

Chúng ta cần chia đều các bức ảnh trong dải ảnh. Công thức rất đơn giản: nếu chúng ta giả sử chiều rộng của hình là 100% thì mỗi hình ảnh sẽ chiếm 1/5 không gian theo chiều ngang:

Cần phải sử dụng các quy tắc CSS sau:

img dải hình ảnh (chiều rộng: 20%; chiều cao: tự động; )

Bây giờ hãy thay đổi thuộc tính tràn cho div:

Thanh trượt ( chiều rộng: 80%; chiều rộng tối đa: 1000px; tràn: ẩn )

Cuối cùng, chúng ta cần làm cho dải ảnh di chuyển từ trái sang phải. Nếu chiều rộng của div vùng chứa là 100% thì mỗi chuyển động của dải hình ảnh sang trái sẽ được đo bằng phần trăm của khoảng cách đó:

@keyframes slide ( 20% ( left: 0%; ) 25% ( left: -100%; ) 45% ( left: -100%; ) 50% ( left: -200%; ) 70% ( left: -200 %; ) 75% ( trái: -300%; ) 95% ( trái: -300%; ) 100% ( trái: -400%; ) )

Mỗi hình ảnh trên thanh trượt sẽ được đặt trong một div và sẽ di chuyển 5%.

Hình thanh trượt (vị trí: tương đối; chiều rộng: 500%; hoạt ảnh: vô hạn trượt 30 giây; cỡ chữ: 0; phần đệm: 0; lề: 0; trái: 0; )

Phần 2.

Chúng tôi đã làm cho nó trở nên tuyệt vời thanh trượt không có javascript. Hãy thêm các nút điều khiển vào nó trước khi chúng ta tận hưởng vinh quang của mình. Chính xác hơn là không quan tâm đến nó (tôi đã quá lười để mày mò nó), nhưng hãy tạo một cái mới.

Vì vậy, mã HTML của chúng tôi:

Bây giờ hãy quan tâm đến việc tạo hiệu ứng cho các slide của chúng ta. Thật không may, nó sẽ khác nhau đối với số lượng slide khác nhau:

/* dành cho thanh trượt gồm hai trang trình bày */ @keyframes trượt__item-autoplay_count_2 ( 0%(opacity:0;) 20%(opacity:1;) 50%(opacity:1;) 70%(opacity:0;) 100% ( opacity:0;) ) /* cho thanh trượt gồm ba slide */ @keyframes slide__item-autoplay_count_3 ( 0%(opacity:0;) 10%(opacity:1;) 33% (opacity:1;) 43% ( opacity: 0;) 100%(opacity:0;) ) /* cho thanh trượt bốn slide */ @keyframes Slidem__item-autoplay_count_4 ( 0%(opacity:0;) 8% (opacity:1;) 25% (opacity:0;) 8% (opacity:1;) 25% (opacity:0;) :1; ) 33% (opacity:0;) 100%(opacity:0;) ) /* cho thanh trượt năm slide */ @keyframes Slidem-autoplay_count_5 ( 0%(opacity:0;) 7% (opacity: 1;) 20 %(độ mờ:1;) 27% (độ mờ:0;) 100%(độ mờ:0;) )

Buồn phải không? Ngoài ra, đừng quên rằng đối với Opera, Chrome, IE và Mozilla, bạn cần viết mọi thứ giống nhau nhưng có tiền tố thích hợp. Bây giờ hãy viết mã để tạo hiệu ứng cho các slide của chúng ta (sau đây mã cho ba slide sẽ được hiển thị. Mã cho hơn các trang web bạn có thể thấy trong mã ví dụ):

Slider_count_3 .item ( -moz-animation: Slider__item-autoplay_count_3 15 giây vô hạn; -webkit-animation: Slider__item-autoplay_count_3 15 giây vô hạn; -o-animation: Slider__item-autoplay_count_3 15 giây vô hạn; hoạt hình: Slider__item-autoplay_count_3 15 giây vô hạn; ) .item :nth -of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; ) .item:nth-of-type (3) ( -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; )

Như bạn có thể thấy, đối với cặp đầu tiên, độ lệch bằng 0 không thay đổi. Ngoài ra, offset không phụ thuộc vào số slide nên có thể mô tả một lần cho số slide tối đa. Bây giờ hãy đảm bảo các slide không thay đổi khi người dùng di chuột qua thanh trượt của chúng tôi:

Thanh trượt:hover .item ( -moz-animation-play-state: đã tạm dừng; -webkit-animation-play-state: đã tạm dừng; -o-animation-play-state: đã tạm dừng; animation-play-state: đã tạm dừng; )

Cuối cùng, chúng tôi phải chuyển đổi slide của mình. Như bạn đã biết, có một số sự kiện cho phép bạn thay đổi thuộc tính của một phần tử bằng CSS. Đối với một cú nhấp chuột, các lớp giả :focus, :target hoặc :checked trên một trong các thành phần trang có thể giúp chúng ta. Lớp giả :focus chỉ có thể có một phần tử trên mỗi trang, :target làm tắc nghẽn lịch sử trình duyệt và yêu cầu sự hiện diện của thẻ; Lớp giả:đã kiểm tra ghi nhớ trạng thái trước khi rời khỏi trang và trong trường hợp nút radio, chỉ có thể được chọn trên một thành phần trong nhóm. Hãy tận dụng điều này. Chèn trước