Thanh trượt css3 cong lõm đẹp. Nivo Slider là một plugin jQuery miễn phí. Thanh trượt css3 thay thế dựa trên hiệu ứng hoạt hình

Thời gian không đứng yên và cùng với nó là sự tiến bộ. Điều này cũng ảnh hưởng đến Internet. Bạn đã có thể thấy nó đang thay đổi như thế nào vẻ bề ngoài các trang web và đặc biệt phổ biến thiết kế thích ứng. Về vấn đề này, các thanh trượt thích ứng cho trang web đã trở nên rất phổ biến và phù hợp. Khá nhiều thanh trượt, phòng trưng bày và băng chuyền jquery thích ứng mới đã xuất hiện.

Nếu bạn muốn cài đặt một thanh trượt hoặc băng chuyền phổ quát trên trang web của mình, bạn có thể truy cập

Thanh trượt cho trang web

1. Thanh trượt bài viết ngang đáp ứng

Thích ứng băng chuyền ngang Với hướng dẫn chi tiết về cài đặt. Nó được làm theo phong cách đơn giản nhưng bạn có thể tạo kiểu cho phù hợp với mình.

2. Thanh trượt trên Glide.js

Thanh trượt này phù hợp với bất kỳ trang web nào. Nó sử dụng Glide.js với mã nguồn mở. Màu sắc của thanh trượt có thể dễ dàng thay đổi.

Thanh trượt thích ứng cho một trang web có nội dung. Điểm nổi bật của thanh trượt này là hiệu ứng 3D của hình ảnh cũng như các hình ảnh động khác nhau xuất hiện ngẫu nhiên.

4. Thanh trượt sử dụng canvas HTML5

Một thanh trượt rất đẹp và ấn tượng với các hạt tương tác. Nó được tạo bằng canvas HTML5,

5. Thanh trượt biến đổi hình ảnh

Thanh trượt có hiệu ứng biến hình. Trong ví dụ này, thanh trượt rất phù hợp với danh mục đầu tư của nhà phát triển web hoặc studio web ở dạng danh mục đầu tư.

6. Thanh trượt tròn

Thanh trượt có dạng hình tròn có tác dụng lật ảnh.

7. Thanh trượt có nền mờ

Thanh trượt đáp ứng với việc chuyển đổi và làm mờ nền.

8. Thanh trượt thời trang đáp ứng

Thanh trượt trang web đơn giản, nhẹ và đáp ứng.

9. Slicebox - Thanh trượt hình ảnh jQuery 3D (CẬP NHẬT)

Phiên bản cập nhật của thanh trượt Slicebox với các bản sửa lỗi và tính năng mới.

Plugin JQuery để tạo lưới hình ảnh linh hoạt sẽ chuyển đổi các bức ảnh bằng cách sử dụng các hoạt ảnh và thời gian khác nhau.

Thanh trượt cho trang web, phần hai.

11. Thanh trượt linh hoạt

Phổ quát plugin miễn phí cho trang web của bạn. Plugin này có nhiều tùy chọn thanh trượt và băng chuyền.

12. Khung ảnh

Fotorama là một plugin phổ quát. Nó có nhiều cài đặt. Mọi thứ hoạt động nhanh chóng và dễ dàng, đồng thời bạn cũng có thể xem các slide ở chế độ toàn màn hình. Thanh trượt có thể được sử dụng ở cả kích thước cố định và thích ứng, có hoặc không có hình thu nhỏ, có hoặc không có cuộn tròn, v.v. Sử dụng khung ảnh, bạn có thể tạo các thanh trượt thích ứng thú vị cho trang web của mình.

Tái bút Tôi đã cài đặt thanh trượt nhiều lần và tôi nghĩ rằng đó là một trong những thanh trượt tốt nhất

13. Thư viện thanh trượt 3D miễn phí và thích ứng với hình thu nhỏ.

Thanh trượt thư viện thử nghiệm 3DPanelLayout có lưới và hiệu ứng thú vị hoạt hình.

14. Thanh trượt trên css3

Thanh trượt thích ứng được tạo bằng css3 với nội dung hiển thị mượt mà và hoạt ảnh nhẹ nhàng.

là một thanh trượt hình ảnh tuyệt vời hiệu ứng hình ảnh và hoạt hình.

17. Đàn hồi

Thanh trượt đàn hồi với khả năng phản hồi đầy đủ và hình thu nhỏ của trang trượt.

18. Rạch

Đây là thanh trượt đáp ứng toàn màn hình sử dụng hoạt ảnh css3. Thanh trượt được tạo thành hai phiên bản và hoạt ảnh được thực hiện khá khác thường.

19. Thư viện ảnh thích ứng cộng thêm

Thanh trượt thư viện miễn phí đơn giản có tính năng tải hình ảnh.

20. Thanh trượt đáp ứng cho WordPress

Thanh trượt đáp ứng và miễn phí cho WP.

21. Thanh trượt nội dung thị sai

Thanh trượt với hiệu ứng thị sai và kiểm soát từng phần tử bằng CSS3.

22. Thanh trượt có link nhạc

Thanh trượt sử dụng mã nguồn mở JPlayer. Thanh trượt này giống như một bản trình bày có âm nhạc.

Thanh trượt cho trang web, phần ba.

23. Thanh trượt với jmpress.js

Thanh trượt đáp ứng dựa trên jmpress.js và do đó sẽ cho phép bạn thêm một số hiệu ứng 3D thú vị vào các trang trình bày của mình.

24. Trình chiếu di chuột nhanh

Trình chiếu với khả năng chuyển đổi slide nhanh chóng. Chuyển đổi slide khi di chuột.

Sắp xếp hình ảnh bằng css3.

Cái này thư viện đáp ứngđược tối ưu hóa cho các thiết bị cảm ứng.

TRONG bài học này Chúng ta sẽ tạo một trang tiêu đề đáp ứng đơn giản được trang trí bằng một băng chuyền nơi hình ảnh trượt từ phải sang trái. Giải pháp của chúng tôi không sử dụng JavaScript, trình chiếu dựa trên hoạt ảnh CSS3, được hỗ trợ trong hầu hết các trình duyệt hiện đại: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ và IE10.

Bước 1 - Chuẩn bị

Chúng ta sẽ cần 4 hình ảnh lớn (trong ví dụ của chúng ta kích thước là 1200px x 390px). Đối với thanh trượt ngang, chúng tôi sẽ chuẩn bị một hình ảnh 4800px x 390px trong Photoshop, đặt tất cả các hình ảnh của chúng tôi lần lượt theo chiều ngang và lưu kết quả ở định dạng phù hợp với web (“slider-horizontal.jpg”).

Bước 2 - HTML

Những gì chúng ta thực sự sẽ làm là tạo hoạt ảnh cho thuộc tính vị trí nền cho tiêu đề của chúng ta. Bản thân tiêu đề đã rất đánh dấu đơn giản:

L'ile de Batz

Mã trang hoàn chỉnh trông như thế này:

L"ile de Batz Ngày xửa ngày xưa…

Aenean lacinia bibendum...

Các liên kết để học thuộc lòng..

Quán bar & nhà hàng

Bước 3: CSS di động

Chúng ta sẽ bắt đầu xác định kiểu cho thiết bị di động. Hãy đặt thiết kế cơ bản và sau đó thêm tiện ích mở rộng mẫu cho màn hình lớn hơn. Nội dung của bài học chỉ cung cấp các thuộc tính cơ bản; có thể xem mã đầy đủ trong mã nguồn:

Nội dung ( chiều rộng: 90%; chiều rộng tối thiểu: 300px; chiều rộng tối đa: 1200px; lề: 0 tự động; đệm-top: 1em; màu: #504331 ) tiêu đề ( text-align: center; vị trí: tương đối; ) h1 ( cỡ chữ: 2,75em; nền: trắng; phần đệm: 0 10px; lề dưới: .25em; bên trái: 0; trên cùng: .5em; viền trên: 1px viền dưới: 1px liền khối #504331 ; hình ảnh/map.png) phần đệm ở giữa phía dưới: 177px )

Bước 4. Kiểu dáng cho màn hình lớn

Các phần trên màn hình lớn .chủ yếu Và .màn hình nên được hiển thị khác nhau. Phần .link sẽ rộng 300px và được đặt ở thanh bên phải và phần .chủ yếu sẽ vẫn ở bên trái. Chúng ta cũng sẽ thêm một đường đôi để phân tách các phần. Chúng tôi sẽ xác định chiều rộng màn hình lớn hơn 1024px bằng truy vấn @media:

@media chỉ màn hình và (min-width: 1024px) ( .content ( vị trí: tương đối; ) .main ( lề-phải: 320px; đệm: .5em 20px .5em 0; /*thêm một dòng đôi */ viền-phải : 1px Solid #504331; box-shadow: 2px 0 trắng, 3px 0 #504331; link ( vị trí: tuyệt đối; phải: 0; trên cùng: 0; chiều rộng: 300px; căn chỉnh văn bản: phải; ) )

Bước 5. Hình ảnh đáp ứng trong tiêu đề

Hãy bắt đầu làm việc với phần chính của bài học: thanh trượt CSS đáp ứng trong tiêu đề. Đầu tiên, hãy làm cho hình nền phản hồi nhanh.

Tiêu đề ( nền: url(../images/slider-horizontal.jpg) 0 đáy lặp lại-x; kích thước nền: 400%; phần đệm dưới cùng: 32,5%; )

Sử dụng hai giá trị phần trăm (400% cho thuộc tính kích thước nền và 32,5% cho lề dưới), nền tiêu đề sẽ được hiển thị chính xác bất kể kích thước màn hình.

Tại sao là 400%? Chúng ta có 4 slide nên hiển thị sẽ là 1/4 hình nền ở header. Tức là kích thước nền phải rộng hơn 4 lần so với tiêu đề.

Tại sao lại là 32,5%? Chúng tôi đặt nền của chúng tôi ở cuối tiêu đề. Chiều cao của ảnh nền là 390px, chiều rộng của từng slide là 1200px, 390/1200 = 0,325 nên chiều cao bằng 32,5% chiều rộng.

Bước 6. Hoạt hình

Chúng ta sẽ làm động thuộc tính vị trí nền. Để hiển thị thuộc tính hình ảnh thứ hai vị trí nền nên quan trọng 33,33333% đáy, ngày thứ ba - 66,66667% đáy, và thứ tư - 100% đáy. Hình ảnh đầu tiên được hiển thị khi giá trị thuộc tính là vị trí nền bình đẳng 0 đáy hoặc 133,33333% đáy(chúng tôi đặt số lần lặp lại thành lặp lại-x).

Mỗi hình ảnh có 25% thời gian "danh tiếng". Cái đầu tiên được hiển thị từ 0 đến 25%, cái thứ hai từ 25% đến 50%, cái thứ ba từ 50% đến 75% và cái cuối cùng từ 75% đến 100%. Chúng tôi đặt các hiệu ứng chuyển tiếp để hình ảnh bắt đầu trượt sớm hơn một chút (sử dụng giá trị 5%) trước khi hết 25% thời gian hiển thị của nó. Đây là những gì nó trông giống như @keyframes:

@keyframes h_slide ( 0% ( vị trí nền: 0% đáy; ) 20% ( vị trí nền: 0% đáy; ) 25% ( vị trí nền: 33,33333% đáy; ) 45% ( vị trí nền: 33,33333% đáy ; ) 50% ( vị trí nền: 66,66667% đáy; ) 70% ( vị trí nền: 66,66667% đáy; ) 75% ( vị trí nền: 100% đáy; ) 95% ( vị trí nền: 100% đáy; ) 100% ( vị trí nền: 133,33% dưới cùng; ) )

Xin lưu ý rằng bạn cần thêm tiền tố trình duyệt: @-webkit-keyframes (dành cho Chrome, Safari, Safari của iOS, Android) và @-moz-keyframes (dành cho Firefox 15).

Dưới đây là mã tiêu đề hoàn chỉnh. Hoạt ảnh “h_slide” của chúng tôi lặp lại sau mỗi 24 giây (6 giây cho mỗi slide) theo một vòng lặp vô tận. Chức năng thời gian quan trọng thoải mái, sao cho mỗi trang chiếu sẽ chậm lại khi kết thúc quá trình chuyển đổi.

Tiêu đề ( text-align: center; vị trí: tương đối; nền: url(../images/slider-horizontal.jpg) 0 lặp lại dưới cùng-x; kích thước nền: 400%; phần đệm dưới cùng: 32,5%; -webkit- hoạt hình: h_slide 24s dễ dàng ra vô hạn; -moz-animation: h_slide 24s dễ dàng ra vô hạn;

18/05/15 48.9K

Nếu bạn cần thêm thanh trượt hình ảnh jQuery chất lượng cao vào trang web của mình thì trong bài viết này bạn sẽ tìm thấy mô tả plugin cần thiết. Mặc dù JQuery đã giúp làm việc với JavaScript dễ dàng hơn nhiều nhưng chúng ta vẫn cần các plugin để tăng tốc quá trình thiết kế web.

Chúng tôi có thể thay đổi một số plugin này và tạo các thanh trượt mới phù hợp hơn nhiều cho mục đích trang web của chúng tôi.

Đối với các thanh trượt khác, bạn chỉ cần thêm tiêu đề, hình ảnh và chọn hiệu ứng chuyển tiếp slide đi kèm với thanh trượt. Tất cả các plugin này đều có tài liệu chi tiết kèm theo nên việc thêm các hiệu ứng hoặc chức năng mới vào chúng sẽ không khó. Bạn thậm chí có thể thay đổi trình kích hoạt dựa trên sự kiện nếu bạn là lập trình viên JQuery có kinh nghiệm.

Các xu hướng mới nhất như thiết kế đáp ứng rất quan trọng đối với các dự án web, cho dù bạn đang triển khai plugin hay tập lệnh. Tất cả những yếu tố này làm cho mỗi plugin này trở nên rất linh hoạt. Tất cả mọi thứ xuất hiện trong năm 2014 đều có trong danh sách này.

Thanh trượt hình ảnh JQuery Jssor Responsive Slider

Gần đây tôi đã xem qua thanh trượt JQuery mạnh mẽ này và có thể tận mắt thấy rằng nó hoạt động rất tốt. Nó chứa đựng những khả năng vô hạn có thể được mở rộng thông qua mã nguồn mở của thanh trượt:

Thiết kế thích ứng;
Hơn 15 tùy chọn tùy chỉnh;
Hơn 15 hiệu ứng thay đổi hình ảnh;
Thư viện hình ảnh, băng chuyền, hỗ trợ kích thước toàn màn hình;
Công cụ xoay biểu ngữ dọc, danh sách các slide;
Hỗ trợ video.

Bản trình diễn | Tải xuống

PGwSlider - thanh trượt đáp ứng dựa trên JQuery/Zepto

Nhiệm vụ duy nhất của plugin này là hiển thị các slide hình ảnh. Nó rất nhỏ gọn vì các tệp JQuery chỉ có kích thước 2,5 KB, cho phép nó tải rất nhanh:

Bố cục thích ứng;
Tối ưu hóa SEO;
Hỗ trợ cho các trình duyệt khác nhau;
Chuyển đổi hình ảnh đơn giản;
Kích thước lưu trữ chỉ là 2,5 KB.

Bản trình diễn | Tải xuống

Thanh trượt tin tức dọc Jquery

Thanh trượt JQuery linh hoạt và hữu ích được thiết kế cho các tài nguyên tin tức với danh sách các ấn phẩm ở bên trái và hình ảnh hiển thị ở bên phải:

Thiết kế thích ứng;
Cột dọc để chuyển đổi tin tức;
Tiêu đề mở rộng.

Bản trình diễn | Tải xuống

Thanh trượt Wallop

Thanh trượt này không chứa jQuery, nhưng tôi muốn giới thiệu nó vì nó rất nhỏ gọn và có thể giảm đáng kể thời gian tải trang. Hãy cho tôi biết nếu bạn thích nó:

Bố cục thích ứng;
Thiết kế đơn giản;
Tùy chọn thay đổi slide khác nhau;
Mã JavaScript tối thiểu;
Kích thước chỉ có 3KB.

Bản trình diễn | Tải xuống

Phòng trưng bày Polaroid kiểu phẳng

Một thư viện theo phong cách rải rác tài liệu trên bàn làm việc với bố cục linh hoạt và thiết kế đẹp mắt chắc chắn sẽ được nhiều bạn quan tâm. Phù hợp hơn cho máy tính bảng và màn hình lớn:

Bản trình diễn | Tải xuống

HiSlider – Thanh trượt hình ảnh HTML5, jQuery và WordPress

HiSlider đã giới thiệu một plugin thanh trượt jQuery miễn phí mới mà bạn có thể tạo nhiều thư viện hình ảnh khác nhau với các hiệu ứng chuyển tiếp tuyệt vời:

Thanh trượt thích ứng;
Không yêu cầu kiến thức lập trình;
Một số mẫu và giao diện tuyệt vời;
Hiệu ứng chuyển tiếp đẹp mắt;
Hỗ trợ cho các nền tảng khác nhau;
Tương thích với WordPress, Joomla, Drupal;
Khả năng hiển thị các loại nội dung khác nhau: hình ảnh, video YouTube và video Vimeo;
Thiết lập linh hoạt;
Các tính năng bổ sung hữu ích;
Không giới hạn số lượng nội dung được hiển thị.

Demo |Tải xuống

Ôi thanh trượt

Thanh trượt WOW là jQuery đáp ứng-Thanh trượt hình ảnh với các hiệu ứng hình ảnh tuyệt vời (domino, xoay, làm mờ, lật và flash, bay ra, rèm) và các mẫu chuyên nghiệp.

WOW Slider đi kèm với trình hướng dẫn cài đặt cho phép bạn tạo các thanh trượt tuyệt vời trong vài giây mà không cần phải hiểu mã hoặc chỉnh sửa hình ảnh. Các phiên bản plugin dành cho Joomla và WordPress cũng có sẵn để tải xuống:

Đáp ứng đầy đủ;
Hỗ trợ tất cả các trình duyệt và tất cả các loại thiết bị;
Ủng hộ thiết bị cảm ứng;
Dễ dàng cài đặt trên WordPress;
Linh hoạt trong cấu hình;
Tối ưu hóa SEO.

Demo |Tải xuống

Nivo Slider – plugin jQuery miễn phí

Nivo Slider được cả thế giới biết đến là thanh trượt hình ảnh đẹp và dễ sử dụng nhất. Plugin Nivo Slider miễn phí và được phát hành theo giấy phép MIT:

Yêu cầu JQuery 1.7 trở lên;
Hiệu ứng chuyển tiếp đẹp mắt;
Cấu hình đơn giản và linh hoạt;
Nhỏ gọn và thích ứng;
Mã nguồn mở;
Mạnh mẽ và đơn giản;
Một số mẫu khác nhau;
Cắt ảnh tự động.

Demo |Tải xuống

Thanh trượt jQuery đơn giản với tài liệu kỹ thuật

Ý tưởng này được lấy cảm hứng từ thanh trượt của Apple, trong đó một số phần tử nhỏ có thể bay ra ngoài với các hiệu ứng hoạt hình khác nhau. Các nhà phát triển đã cố gắng triển khai khái niệm này, có tính đến các yêu cầu tối thiểu để tạo ra một thiết kế cửa hàng trực tuyến đơn giản, trong đó các yếu tố “bay” đại diện cho các danh mục khác nhau:

Bố cục thích ứng;
Thiết kế tối giản;
Nhiều hiệu ứng thay đổi thả và trượt khác nhau.

Demo |Tải xuống

Thanh trượt hình ảnh jQuery kích thước đầy đủ

Một thanh trượt rất đơn giản chiếm 100% chiều rộng trang và thích ứng với kích thước màn hình của thiết bị di động. Nó hoạt động với các chuyển tiếp CSS và hình ảnh được "xếp chồng" cùng với các điểm neo. Mỏ neo có thể được thay thế hoặc loại bỏ nếu bạn không muốn đính kèm liên kết tới hình ảnh.

Khi cài đặt, thanh trượt sẽ mở rộng đến 100% chiều rộng màn hình. Nó cũng có thể tự động giảm kích thước của hình ảnh slide:

Thanh trượt JQuery thích ứng;
Kích thước đầy đủ;
Thiết kế tối giản.

Demo |Tải xuống

Thanh trượt nội dung đàn hồi + hướng dẫn

Thanh trượt nội dung đàn hồi tự động điều chỉnh chiều rộng và chiều cao dựa trên kích thước của phần tử gốc. Đây là một thanh trượt jQuery đơn giản. Nó bao gồm một khu vực trượt ở trên cùng và một thanh tab điều hướng ở phía dưới. Thanh trượt điều chỉnh chiều rộng và chiều cao theo kích thước của vùng chứa chính.

Khi xem trên màn hình chéo nhỏ, các tab điều hướng sẽ biến thành các biểu tượng nhỏ:

Thiết kế thích ứng;
Di chuyển nhấp chuột.

Demo |Tải xuống

Thanh trượt ngăn xếp 3D miễn phí

Thanh trượt thử nghiệm cuộn qua hình ảnh ở chế độ 3D. Hai ngăn xếp giống như chồng giấy, khi cuộn, hình ảnh sẽ hiển thị ở giữa thanh trượt:

Thiết kế thích ứng;
Lật - chuyển tiếp;
Hiệu ứng 3D.

Demo |Tải xuống

Thanh trượt khe toàn màn hình dựa trên hướng dẫn JQuery và CSS3 +

Hướng dẫn này sẽ chỉ cho bạn cách tạo một thanh trượt có một nút xoắn: ý tưởng là “cắt” và hiển thị trang chiếu hiện tại khi bạn mở hình ảnh tiếp theo hoặc hình ảnh trước đó. Sử dụng hoạt ảnh JQuery và CSS, chúng ta có thể tạo các hiệu ứng chuyển tiếp độc đáo:

Thiết kế thích ứng;
Tách chuyển tiếp;
Thanh trượt toàn màn hình.

Demo |Tải xuống

Unislider - một thanh trượt jQuery rất nhỏ

Không có chuông và còi không cần thiết, kích thước nhỏ hơn 3KB. Sử dụng bất kỳ mã HTML nào cho các slide của bạn, mở rộng nó bằng CSS. Mọi thứ liên quan đến Unslider đều được lưu trữ trên GitHub:

Hỗ trợ cho nhiều trình duyệt khác nhau;
Hỗ trợ bàn phím;
điều chỉnh chiều cao;
Thiết kế thích ứng;
Hỗ trợ đầu vào cảm ứng.

Bản trình diễn | Tải xuống

Trang trình bày đáp ứng tối thiểu

Một plugin đơn giản và nhỏ gọn (kích thước chỉ 1 KB) tạo thanh trượt phản hồi nhanh bằng cách sử dụng các phần tử bên trong vùng chứa. ResponsiveSLides.js hoạt động với nhiều loại trình duyệt, bao gồm tất cả các phiên bản IE từ IE6 trở lên:

Đáp ứng đầy đủ;
Kích thước 1 KB;
Chuyển tiếp CSS3 với khả năng chạy qua JavaScript;
Đánh dấu đơn giản bằng cách sử dụng danh sách dấu đầu dòng;
Khả năng tùy chỉnh các hiệu ứng chuyển tiếp và thời lượng xem của một slide;
Hỗ trợ khả năng tạo nhiều slide show;
Cuộn tự động và thủ công.

Demo |Tải xuống

Máy ảnh - jQuery miễn phí thanh trượt

Camera là một plugin có nhiều hiệu ứng chuyển tiếp và bố cục đáp ứng. Dễ dàng cài đặt, được hỗ trợ bởi các thiết bị di động:

Thiết kế đáp ứng đầy đủ;
Chữ ký;
Khả năng thêm video;
33 màu sắc khác nhau biểu tượng

Demo |Tải xuống

SlidesJS, plugin jQuery đáp ứng

SlideJS là plugin thích ứng dành cho JQuery (1.7.1 trở lên) có hỗ trợ cho thiết bị cảm ứng và chuyển tiếp CSS3. Hãy thử nghiệm với nó, thử một vài ví dụ làm sẵnđể giúp bạn tìm ra cách thêm SlidesJS vào dự án của mình:

Thiết kế thích ứng;
Chuyển tiếp CSS3;
Hỗ trợ các thiết bị cảm ứng;
Dễ dàng thiết lập.

Bản trình diễn | Tải xuống

Thanh trượt Jquery BX

Đây là thanh trượt jQuery đáp ứng miễn phí:

Hoàn toàn đáp ứng – thích ứng với mọi thiết bị;
Thay đổi trượt ngang, dọc;
Trang trình bày có thể chứa hình ảnh, video hoặc nội dung HTML;
Hỗ trợ mở rộng cho các thiết bị cảm ứng;
Sử dụng chuyển tiếp CSS cho hoạt ảnh slide (tăng tốc phần cứng);
API cuộc gọi lại và các phương pháp hoàn toàn công khai;
Kích thước tệp nhỏ;
Dễ để thực hiện.

Demo |Tải xuống

FlexSlider 2

Thanh trượt đáp ứng tốt nhất. Một phiên bản mớiđã được sửa đổi để tăng tốc độ và độ nén.

Bản trình diễn | Tải xuống

Phòng trưng bày - thư viện ảnh thích ứng Dựa trên JavaScript

Galleria được sử dụng trên hàng triệu trang web để tạo thư viện hình ảnh trong chất lượng cao. Số lượng đánh giá tích cực về công việc của cô ấy chỉ đơn giản là ngoài bảng xếp hạng:

Hoàn toàn miễn phí;
Chế độ xem toàn màn hình;
Thích ứng 100%;
Không cần kinh nghiệm lập trình;
Hỗ trợ iPhone, iPad và các thiết bị cảm ứng khác;
Flickr, Vimeo, YouTube và hơn thế nữa;
Một số chủ đề.

Bản trình diễn | Tải xuống

Blueberry - thanh trượt hình ảnh jQuery đáp ứng đơn giản

Tôi giới thiệu với bạn một thanh trượt hình ảnh jQuery được viết riêng cho thiết kế web đáp ứng. Blueberry là một plugin thanh trượt hình ảnh nguồn mở thử nghiệm được viết riêng để hoạt động với các mẫu đáp ứng:

Thiết kế tối thiểu;
Bố cục thích ứng;
Bài thuyết trình.

Bản trình diễn | Tải xuống

jQuery Popeye 2.1

Các yếu tố tiêu chuẩn của phiên bản đầu tiên của chương trình được sử dụng: thanh trượt ẩn sang trái và bật lên ở bên phải. Các thành phần điều hướng và chú thích tương tự xuất hiện khi di chuột qua:

Thiết kế thích ứng;
Hỗ trợ chữ ký;
Chế độ trình chiếu.

Bản trình diễn | Tải xuống

FractionSlider là một plugin miễn phí Thanh trượt jQuery với hiệu ứng thị sai

Hãy thử plugin tuyệt vời này. Hoạt ảnh của một số thành phần khi hiển thị hình ảnh với các cài đặt cho từng thành phần. FractionSlider là một plugin jQuery dành cho hình ảnh hoặc văn bản. Nó cho phép bạn tạo hiệu ứng động cho nhiều phần tử slide cùng một lúc. Bạn có thể đặt các phương thức hoạt ảnh khác nhau, chẳng hạn như thay đổi khung hình hoặc di chuyển theo một hướng nhất định:

Thiết kế thích ứng;
Hoạt hình của các yếu tố;
Quản lý cài đặt hoạt ảnh;
Hoạt hình nền.

Demo |Tải xuống

đáp ứng miễn phí Thanh trượt hình ảnh với sự quản lý

Với FlexSlider, chúng ta có thể mã hóa một thanh trượt với giao diện "ấn tượng". Plugin cho phép bạn thêm chức năng và kiểu thông qua CSS3. Tôi hy vọng bạn thích nó và sử dụng nó trong các dự án của bạn. Hãy liệt kê các chức năng của nó:

Thiết kế thích ứng;
Hiệu ứng mờ dần;
Mũi tên trái, phải;
Nút màu xanh lá cây.

Demo |Tải xuống

Sequence là một plugin miễn phí có tính năng chuyển tiếp CSS3.

Nó đi kèm với bốn chủ đề và chỉ những chủ đề phức tạp nhất, chẳng hạn như thanh trượt kiểu Apple và thanh trượt thị sai ngang, là không phản hồi:

Ba chủ đề miễn phí;
Thị sai trượt ngang;
phong cách táo;
Chủ đề thích ứng;
Hỗ trợ các thiết bị cảm ứng;
Dễ dàng sửa đổi;
Hỗ trợ cho các trình duyệt khác nhau.

Tốt xấu

Chào mọi người. Tôi muốn giới thiệu với bạn một thanh trượt rất thú vị. Ôi... tôi thấy bạn đã hoàn toàn quên mất tôi rồi. Vâng, vâng, tôi đã biến mất, có lẽ được sáu tháng hoặc một năm, và tôi hoàn toàn không biết làm cách nào để ép mình đăng một bài viết mỗi ngày (mặc dù điều này hoàn toàn có thể xảy ra). Được rồi, đó không phải là điều chúng ta đang nói bây giờ. Thanh trượt được cung cấp bởi Tympanus Codrops và chạy trên HTML5, CSS3 và TweenMax.js.

Thanh trượt không xoay từ trái sang phải hoặc từ trên xuống dưới mà theo đường chéo. Mũi tên điều hướng nằm ở góc trên bên trái và phía dưới bên phải. Việc điều hướng cũng được thực hiện bằng cách nhấp vào hình thu nhỏ ở bên phải và bên trái. Tất cả các hình ảnh động đều rất mượt mà và hoạt động bình thường ở mọi chế độ trình duyệt hiện đại. Mỗi thành phần thanh trượt riêng lẻ có trang riêng, trang này sẽ mở ra khi bạn nhấp vào bản xem trước. Trang này có ảnh, tiêu đề và văn bản.

Thanh trượt hoàn hảo cho một phòng trưng bày, danh mục đầu tư của một nghệ sĩ, nhiếp ảnh gia, nhà điêu khắc, nói tóm lại là bất kỳ người nào tham gia vào các hoạt động sáng tạo và có các tác phẩm mà anh ta muốn trưng bày trên trang web. Một phòng trưng bày trên trang web của bảo tàng hoặc triển lãm sẽ rất đẹp.

Kết nối một thư viện thật dễ dàng

Trước tiên, bạn chỉ cần tải xuống mã nguồn từ trang web của tôi bằng liên kết trực tiếp. Từ kho lưu trữ, bạn cần tải các thư mục img, css và js lên thư mục gốc của trang web

Sau đó, chúng tôi kết nối các tập lệnh và phong cách. Kiểu được bao gồm bằng cách thêm mã sau vào thẻ

và viết script xuống trang tới thẻ đóng

Đầu tiên, chúng tôi sẽ thêm điều hướng vào đầu trang web.

mũi tên thả mũi tên dài navarrow

và sau đó chính thanh trượt

Ký ức & Suy nghĩ 1 Tự động hóa Đi lang thang ngẫu nhiên 2 Máy móc Từ tùy ý 3 Cùng tồn tại Hướng dẫn duy nhất là trái tim của bạn Sự trôi dạt ma ám 4 Bellamio Vui vẻ khác nhau 5 Đồng cỏ Hy vọng và ước mơ 6 Trọng tâm 1 Tự động hóa Một cái cây cần phải là bạn của bạn nếu bạn định vẽ nó Chỉ hãy để điều này xảy ra. Chúng ta hãy để điều này trôi ra khỏi tâm trí mình. Hãy thư giãn và để nó trôi đi. Hãy để những đám mây nhỏ hạnh phúc trôi đi trong thế giới của chúng ta. Đó là một bức tranh rất lạnh, có lẽ tôi phải đi lấy áo khoác. Nó sắp chết cóng rồi. Đây sẽ là một cảnh biển nhỏ hạnh phúc. Chúng ta hãy lên đây và bắt đầu vui chơi thôi. Ít nhất một chút có thể làm được rất nhiều điều Làm việc trên một việc tại một thời điểm. Đừng để bị cuốn đi - chúng ta còn rất nhiều thời gian. Hãy đặt cảm xúc của bạn vào đó, trái tim bạn, đó là thế giới của bạn. Những cái cây này vui quá. Tôi bắt đầu với chúng và rất khó để dừng lại. 2 Máy móc Đây có lẽ là điều tuyệt vời nhất xảy ra trong cuộc đời tôi. Chúng tôi không cố gắng dạy bạn thứ gì đó để sao chép. Chúng tôi chỉ ở đây để dạy bạn một kỹ thuật, sau đó để bạn hòa mình vào thế giới. Bây giờ chúng ta sẽ xua tan đám mây này. Ở đây chúng ta không có gì ngoài những cái cây hạnh phúc. Hãy làm điều đó một lần nữa. bạn là gì xem nào, đừng lên kế hoạch nữa. Hãy đi lên đây và bắt đầu vui vẻ. Một chút thôi cũng có thể làm được nhiều điều như vậy. Làm việc trên một việc tại một thời điểm. Đừng để bị cuốn đi - chúng ta còn rất nhiều thời gian. Hãy đặt cảm xúc của bạn vào đó, trái tim bạn, đó là thế giới của bạn. Những cái cây này vui quá. Tôi bắt đầu với chúng và rất khó để dừng lại. 3 Cùng tồn tại Người dẫn đường duy nhất là trái tim của bạn Hãy đi lên đây và bắt đầu vui vẻ Ít nhất một chút cũng có thể làm được rất nhiều. Hãy làm từng việc một. Đừng quá bận tâm - chúng ta có rất nhiều thời gian . Hãy đặt cảm xúc của bạn vào đó, trái tim bạn, đó là thế giới của bạn. Những cái cây này thật thú vị. Tôi bắt đầu với chúng và rất khó để dừng lại. Nhưng chúng ta chưa đạt đến đó nên chúng ta không cần phải làm vậy hãy lo lắng về điều đó. Bây giờ chúng ta hãy đặt một vài đám mây nhỏ hạnh phúc vào đây. Cái quái gì vậy. Lớp sơn mỏng sẽ dính vào lớp sơn dày. Tôi sẽ trộn một chút màu. 4 Bellamio Điều kiện tiên quyết duy nhất là nó làm cho bạn hạnh phúc. Xem. Chúng tôi lấy góc của bàn chải và để nó phát qua lại. Điều này không có kế hoạch, nó thực sự chỉ xảy ra. Tôi "Tôi hơi yếu đuối, tôi không thể chụp Bambi ngoại trừ bằng máy ảnh. Tôi đoán là tôi hơi kỳ quặc. Tôi thích nói chuyện với cây cối và động vật. Không sao cả; tôi có nhiều niềm vui hơn hầu hết mọi người. Hôm nay chúng ta sẽ chơi với những đám mây. Bạn không biết mình có sức mạnh lớn đến thế sao? Bạn có thể dời núi Bạn có thể làm bất cứ điều gì. Hãy lên đây và bắt đầu vui vẻ. Một chút thôi cũng có thể làm được nhiều điều. Làm việc trên một việc tại một thời điểm. Đừng để bị cuốn đi - chúng ta còn rất nhiều thời gian. Hãy đặt cảm xúc của bạn vào đó, trái tim bạn, đó là thế giới của bạn. Những cái cây này vui quá. Tôi bắt đầu với chúng và rất khó để dừng lại. 5 Đồng cỏ Hãy lên đây và bắt đầu vui chơi Vì vậy, chúng ta thường tránh nước chảy, và nước chảy rất thú vị. Mọi người sẽ nhìn mọi thứ khác nhau - và đó là cách nó phải như vậy. Cây to khỏe cần rễ to khỏe. Steve muốn những suy ngẫm, vì vậy hãy cho anh ấy những suy ngẫm. Chúng ta không cần phải cam kết. Chúng tôi chỉ đang chơi ở đây thôi. Tạo ra những bông hoa nhỏ sống trên mây. Chúng ta hãy lên đây và bắt đầu vui chơi. Ít nhất một chút cũng có thể làm được rất nhiều việc. Hãy làm từng việc một. Đừng để bị cuốn đi - chúng ta có rất nhiều thời gian. Hãy đặt cảm xúc của bạn vào đó, trái tim của bạn, đó là thế giới của bạn. Những cái cây này thật thú vị. Tôi bắt đầu với chúng và rất khó để dừng lại. 6 Trọng tâm Điều này không có kế hoạch, nó thực sự chỉ xảy ra Nhưng chúng tôi không ở đó Tuy nhiên, vì vậy chúng ta không cần phải lo lắng về điều đó. Bây giờ chúng ta hãy đặt một vài đám mây nhỏ hạnh phúc vào đây. Cái quái gì thế. Một lớp sơn mỏng sẽ dính vào một lớp sơn dày. Tôi sẽ trộn một chút màu. Chúng ta sẽ sử dụng Van Dyke Brown, Permanent Red và một chút Prussian Blue. Chúng ta hãy lên đây và bắt đầu vui chơi. Ít nhất một chút cũng có thể làm được rất nhiều việc. Hãy làm từng việc một. Đừng để bị cuốn đi - chúng ta có rất nhiều thời gian. Hãy đặt cảm xúc của bạn vào đó, trái tim bạn, đó là thế giới của bạn. Những cái cây này thật thú vị. Tôi bắt đầu với chúng và rất khó để dừng lại.

Đó là tất cả. Thanh trượt đã sẵn sàng! Chúc may mắn trong công việc

Chào mừng một lần nữa đến với blog của tôi. Ngày nay trong CSS, nhờ các bộ chọn mới, có thể tạo một thanh trượt mà không cần tập lệnh. Vì vậy trong bài viết này tôi sẽ hướng dẫn các bạn cách tạo một thanh trượt responsive trong css3?

Vì vậy, hôm nay tôi sẽ hướng dẫn bạn một cách chi tiết cách tạo thanh trượt của riêng bạn mà không cần tập lệnh, điều chỉnh nó cho phù hợp với mọi thiết bị và dễ dàng thay đổi giao diện của nó trong tương lai, cũng như thêm các trang trình bày mới. Chúng tôi sẽ chỉ tạo 3 slide, chúng sẽ được chuyển đổi thủ công khi bạn nhấp vào nút. Vâng, hãy bắt đầu!

Trước hết, bạn cần hiểu đánh dấu sẽ là gì. Trong ảnh chụp màn hình này, bạn có thể xem ví dụ về đánh dấu của tôi, đó là những gì tôi sẽ làm hôm nay.
Tôi cũng sẽ sao chép tất cả những điều này vào mã để bạn có thể sao chép và dán nó cho chính mình.
Bước đầu tiên là tạo các nút chuyển đổi slide. Vì sẽ có ba slide nên cần có cùng số lượng nút:

Mỗi cái nhận được mã định danh duy nhất của riêng mình và một mã được chọn theo mặc định.

Đoạn mã cuối cùng chúng ta cần. Nó hiển thị nhãn cho các nút, nhưng trên thực tế chúng ta sử dụng chúng để ẩn các nút mặc định (nút radio không được tạo kiểu) và thay vào đó đặt các khối nhãn này có thể được tạo kiểu. Chúng sẽ đóng vai trò là các nút chuyển đổi và việc kết nối với các nút radio được thực hiện thông qua thuộc tính for đặc biệt.

Và bây giờ tất cả mã này cần được gói trong một vùng chứa chung. Hãy để đây là một khối có lớp bọc.

Vì vậy, để bắt đầu chúng ta sẽ thiết lập phong cách chung, điều này sẽ giúp bạn đặt lại tất cả phần đệm về mặc định, đồng thời đảm bảo rằng phần đệm và đường viền bên trong được tính đến theo chiều rộng của các phần tử. Việc này được thực hiện như thế này:

* ( lề: 0; phần đệm: 0; kích thước hộp: hộp viền; )

Nhân tiện, * có nghĩa là tất cả các bộ chọn. Đó là, một bộ chọn phổ quát và toàn cầu.

Chúng tôi sắp xếp container. Bản thân nó là khối chứa tất cả 3 phần quan trọng của chúng ta - nút, trang trình bày và chú thích.

Bạn có thể đặt BẤT KỲ chiều rộng và chiều cao nào, tùy thuộc vào kích thước ảnh của bạn cho các trang chiếu. Tôi đã cắt ảnh trước thành kích thước 600 x 350 pixel, đó là lý do tại sao tôi chỉ ra các kích thước này. lề: 0 tự động sẽ căn chỉnh vùng chứa chính xác ở giữa trang và định vị tương đốiĐiều này sẽ cho phép bạn đặt chính xác các nút trong vùng chứa sau này.

Đầu tiên, đây là các phong cách:

Thanh trượt ( màu nền: #999; chiều cao: kế thừa; tràn: ẩn; vị trí: tương đối; chiều rộng: kế thừa; )

Hãy cung cấp cho thanh trượt cùng chiều rộng và chiều cao như vùng chứa chung. Chúng tôi cũng chỉ định màu sắc và vị trí cũng như thuộc tính tràn: ẩn sẽ cắt bỏ mọi thứ không rơi vào khối.

Việc tiếp theo bạn cần làm là tự mình thiết kế các slide:

Các trang trình bày ( chiều cao: kế thừa; độ mờ: 0; vị trí: tuyệt đối; chiều rộng: kế thừa; z-index: 0; ) .auto1 ( hình nền: url(bmw.jpg); ) .auto2 ( hình nền: url(audi .jpg); ) .auto3 ( hình nền: url(porshe.jpg); )

Chúng ta cũng chỉ định chiều rộng và chiều cao như cho slide. Giá trị kế thừa cho phép bạn kế thừa giá trị của khối cha. Bằng cách sử dụng thuộc tính chỉ mục z và độ mờ, chúng ta sẽ làm cho hình ảnh của mình trở nên vô hình. Dưới đây chúng tôi chỉ rõ hình ảnh nền.

Hiện tại, chúng tôi sẽ không nhìn thấy bất cứ thứ gì, chỉ có nền màu xám vì hình ảnh của chúng tôi đã bị ẩn.

Bây giờ chúng ta cần loại bỏ các nút radio tiêu chuẩn và thay vào đó là cách điệu hóa các chú thích.

Gói > đầu vào ( display: none; )

Loại bỏ các nút radio.

Gói .control ( vị trí: tuyệt đối; lề trái: -50px; trái: 50%; )

Sử dụng các kiểu này, chúng ta sẽ căn giữa khối bằng các nút.

Nhãn bọc ( con trỏ: con trỏ; hiển thị: khối nội tuyến; chiều cao: 25px; lề: 10px; vị trí: tương đối; chiều rộng: 25px; đường viền: 2px màu xám đậm; bán kính đường viền: 30%/10px; )

Những kiểu này làm một việc rất quan trọng - chúng cho phép chúng ta tạo kiểu cho các nút. Bạn cần đặt kích thước của các nút, đặt chúng thành loại dòng khối, thụt lề và viền màu xám. Bạn cũng có thể thêm các góc tròn.

Bây giờ chúng ta có ba nút ở giữa các trang chiếu, chúng chỉ có viền màu xám. Hãy đảm bảo rằng khi bạn nhấp vào một nút, một số hình ảnh sẽ xuất hiện trong đó, cho biết nút đó hiện đang hoạt động. Nhân tiện, tôi trình bày kỹ thuật tương tự, chỉ với các hộp kiểm, trong.

Vì bạn và tôi đang chuyển đổi hình ảnh ô tô nên tôi tìm thấy trên Internet một biểu tượng vô lăng, giảm kích thước xuống khoảng 20 x 20. Bây giờ vấn đề nhỏ là thêm hình nền vào nút nếu nó được nhấp vào.

#point1:checked ~ .control label:nth-of-type(1), #point2:checked ~ .control label:nth-of-type(2), #point3:checked ~ .control label:nth-of-type (3) ( nền: url(wheel.png) không lặp lại 50% 50%; )

Điều này được thực hiện bằng cách sử dụng các bộ chọn như thế này. Họ đang làm gì? Trên thực tế, đây là một bộ chọn phức tạp; toàn bộ điều kiện được viết trong đó. Nó hơi giống lập trình. Nó có nghĩa như sau: nếu nút radio được chọn thì bạn cần áp dụng kiểu cho chú thích, kiểu này sẽ đi xa hơn trong phần đánh dấu. Bây giờ khi bạn nhấp vào các nút, hình ảnh vô lăng sẽ xuất hiện bên trong chúng!

giai đoạn quan trọng

Trên thực tế, chúng ta chỉ còn một chút việc phải làm. Cụ thể, hãy đảm bảo rằng thay vì vùng màu xám trên thanh trượt, hình ảnh có ô tô xuất hiện và bạn có thể cuộn qua thành công. Để làm điều này, bạn cần sử dụng một bộ chọn phức tạp khác:

#point1:checked ~ .slider > .auto1, #point2:checked ~ .slider > .auto2, #point3:checked ~ .slider > .auto3 ( opacity: 1; z-index: 1; )

Chuyện gì đang xảy ra vậy? Bây giờ, nếu bạn thử hoạt động của thanh trượt, nó sẽ hoạt động đầy đủ. Với các bộ chọn này, chúng tôi chỉ ra những điều sau: nếu nhấn nút radio, hãy hiển thị trang trình bày mong muốn, nằm ở đâu đó xa hơn trong mã html (phía sau các nút radio).

Vì vậy, khi chúng ta nhấp vào nút đầu tiên, chúng ta sẽ thấy một chiếc ô tô BMW, khi chúng ta nhấp vào nút thứ hai - một chiếc Audi, khi chúng ta nhấp vào nút thứ ba - một chiếc Porshe. Và tất cả thời gian này, khi chuyển đổi, biểu tượng vô lăng sẽ xuất hiện trong nút mà slide đang hoạt động.

Vì vậy, chúng tôi đã tạo một thanh trượt. Tất cả những gì còn lại là thích ứng với nó.

Hiện tại, thanh trượt của chúng tôi có chiều rộng cố định là 600 pixel. Theo đó, các vấn đề sẽ bắt đầu nảy sinh trên màn hình nhỏ hơn chiều rộng này. Cụ thể sẽ xuất hiện thanh cuộn ngang. Để tránh điều này, chúng ta chỉ cần chỉnh sửa một chút mã đã viết. Đây là những gì cần phải thay đổi:

Đối với khối bọc, tức là vùng chứa chính, không đặt width mà là max-width: 600px . Điều này sẽ cho phép vùng chứa co lại khi cửa sổ có chiều rộng nhỏ hơn.
Thanh trượt cần được đặt thành chiều rộng: 100%;
Chúng tôi không thay đổi bất cứ điều gì cho các slide.

Tổng cộng, tất cả các thay đổi có thể được nhìn thấy trong mã này:

Wrap( chiều rộng tối đa: 600px; ) .slider( chiều rộng: 100%; )

Tuyệt vời, bây giờ tất cả những gì còn lại là viết một vài truy vấn phương tiện để làm cho thanh trượt phản hồi đầy đủ cũng như chia tỷ lệ hình ảnh cho phù hợp với màn hình mới. Qua thử nghiệm, tôi phát hiện ra rằng hình ảnh slide bắt đầu không vừa với màn hình ở chiều rộng cửa sổ xấp xỉ 600 pixel. Điều này có nghĩa là xung quanh khu vực này bạn cần phải thay đổi phong cách. Để làm điều này, hãy viết truy vấn phương tiện đầu tiên.

Nhân tiện, tôi đã viết chi tiết về các truy vấn phương tiện và ứng dụng của chúng. Tôi khuyên những người không có ý tưởng về thiết kế đáp ứng nên đọc nó.

Theo đó, để mọi thứ được hiển thị tốt ở độ rộng từ 650 pixel trở xuống, tôi đề xuất thay đổi kiểu sau:

@media screen và (max-width: 650px)( .wrap( max-width: 480px; Height: 280px; ) .slides( Background-size: cover; ) )

Chiều rộng của thanh trượt sẽ giảm và chiều cao cũng sẽ giảm. Đối với các trang trình bày, chúng tôi đã viết một thuộc tính chia tỷ lệ hình ảnh sao cho chúng, trong khi vẫn duy trì tỷ lệ, hoàn toàn vừa khít với thanh trượt mà không bị cắt xén.

Tuyệt vời, bây giờ bạn có thể kiểm tra và đảm bảo rằng khi chiều rộng nhỏ hơn 650 pixel, thanh trượt sẽ biến đổi và trông đẹp mắt mà không cần cắt xén hình ảnh.

Điểm cuối cùng rộng khoảng 400 pixel. Trên đó, hình ảnh của chúng ta lại bắt đầu không phù hợp và chúng ta cần phải hành động. Để làm điều này, tôi sẽ viết một truy vấn phương tiện khác:

@media screen và (max-width: 400px)( .wrap( max-width: 320px; Height: 180px; ) .slides( Background-size: cover; ) )

Mọi thứ vẫn như cũ, chỉ có điều chúng tôi lại giảm chiều rộng và chiều cao của thùng chứa. Tuyệt vời, thanh trượt của chúng tôi hiện đã đáp ứng đầy đủ! Ngay cả trên điện thoại di động có chiều rộng 320px, nó sẽ trông rất tuyệt. Tuy nhiên, hãy tự mình xem:

Nhờ truy vấn phương tiện, hình ảnh được thu nhỏ theo tỷ lệ trong khi vẫn duy trì tỷ lệ của chúng.

Bạn có thể gán một số hiệu ứng cho các slide trong quá trình chuyển tiếp (.slides) và khi hình ảnh xuất hiện, hãy hủy hiệu ứng đó. Để xem kết quả, bạn cần đặt thuộc tính transition cho các slide để quá trình chuyển tiếp diễn ra suôn sẻ. Hiệu ứng ví dụ:

Trang trình bày( biến đổi: xoay(50deg); chuyển tiếp: 1s; )

Bây giờ chỉ cần bộ chọn làm cho trang chiếu hiển thị để hủy chuyển đổi là đủ:

#point1:đã chọn ~ .slider > .auto1( Transform: none; )

Và làm điều này cho tất cả các slide. Theo đó, ban đầu hình ảnh sẽ được xoay và sẽ không nhìn thấy được, còn khi nó xuất hiện sẽ có tác dụng quay trở lại mượt mà. vị trí ban đầu. Theo đó, bạn có thể đưa ra các hiệu ứng của riêng bạn. Chà, chúng tôi đã tạo ra thanh trượt, đó là tất cả đối với tôi. Nếu bạn có thắc mắc, tôi đang chờ đợi trong phần bình luận.

Nói cách khác, bây giờ chúng ta chỉ có hình ảnh, nhưng làm cách nào để chúng ta có thể nhấp vào được? Để làm điều này, bạn phải có sẵn một thanh trượt cho bài học này. Tiếp theo, bạn cần tìm đoạn mã html chịu trách nhiệm về các trang trình bày. Đây là trong ảnh chụp màn hình:

Như bạn có thể thấy, tôi đã chèn liên kết vào slide thứ nhất và slide thứ hai. Vì vậy, khi nhấp vào slide đầu tiên, bạn sẽ truy cập Google, khi nhấp vào slide thứ hai, bạn sẽ truy cập Yandex. Tôi muốn lưu ý rằng liên kết sẽ mở trong cùng một cửa sổ, nghĩa là trang hiện tại với thanh trượt trong trường hợp này nó sẽ biến mất. Nếu bạn cần mở liên kết từ các slide trong một cửa sổ mới, trong mỗi thẻ bạn cần thêm thuộc tính target = "_blank".

Nhưng đó không phải là tất cả những gì phải làm! Hiện tại chưa có gì hoạt động, để làm cho hình ảnh có thể nhấp được, bạn cần thêm phần này vào css:

Trang trình bày a(hiển thị: khối; chiều rộng: 100%; chiều cao: 100%; )

Tức là chúng ta tạo liên kết cho tất cả các slide phần tử khối và đặt chiều rộng và chiều cao của nó thành 100% để nó chiếm toàn bộ không gian của hình ảnh. Bây giờ mọi thứ sẽ hoạt động, bạn có thể kiểm tra nó. Chỉ cần thay thế địa chỉ trong các liên kết là bạn có thể sử dụng nó.

Một ví dụ khác về thanh trượt css3. Lần này chúng ta sẽ làm điều đó thông qua hoạt hình. Nói chung, điều này thậm chí còn dễ dàng hơn phương pháp đầu tiên.

Bạn cần bắt đầu với đánh dấu html. Trong trường hợp này, nó sẽ rất đơn giản, chỉ một khối có mã định danh:

Để làm slide, tôi chuẩn bị 3 bức tranh có cùng kích thước. Trong trường hợp của tôi, nó có chiều rộng 448 pixel và chiều dài 251 pixel. Đây là kích thước của hình ảnh. Tôi khuyên rằng tất cả các kích thước đều giống nhau, khi đó sẽ không có vấn đề gì với thanh trượt của chúng tôi.

Tôi đã đặt nó có cùng kích thước với mỗi bức ảnh, đặt nó ở giữa khối chính và cũng đã đặt bức ảnh đầu tiên làm nền.

Chúng tôi chỉ có một hình nền trong khối và không có gì khác. Để đơn giản, tôi đã lưu các ảnh tôi đang sử dụng trong ví dụ này dưới dạng 1, 2 và 3.

Bây giờ đến phần thú vị. Đã đến lúc viết hoạt ảnh sẽ làm cho hình nền thay đổi. Việc này được thực hiện bằng cách sử dụng cấu trúc @keyframes.

@keyframes trượt( 0%( nền: url(1.jpg);) 33%( nền: url(2.jpg);) 66%( nền: url(3.jpg);) )

Chúng ta hãy xem xét kỹ hơn đoạn mã này. Nhân tiện, nó cần được đặt trong một tệp css. Sau đó từ khóa@keyframes là tên của hoạt ảnh, nó có thể là bất cứ thứ gì, nhưng nó chỉ có thể chứa các ký tự Latinh. Tiếp theo, các dấu ngoặc nhọn được mở ra và mỗi hiệu ứng hoạt hình riêng lẻ được viết vào đó.

Chúng ta thấy gì ở đây? Đầu tiên, khoảng thời gian trong hoạt ảnh được chỉ định trước tiên, sau đó các thuộc tính cần áp dụng tại thời điểm này sẽ được viết bằng dấu ngoặc nhọn. Có vẻ như chúng tôi đang nói với trình duyệt rằng ngay từ đầu hoạt ảnh, nền phải là hình ảnh 1.jpg, sau đó một phần ba chặng đường của hoạt ảnh sẽ được đổi thành 2.jpg, rồi lại chuyển sang hình khác ở phần cuối hình ảnh.

Tuyệt vời, chúng tôi đã viết ra mọi thứ rồi. Bạn có thể lưu tệp và làm mới trang, nhưng sẽ không có gì thay đổi. Điều này là do bạn vừa mô tả các hiệu ứng hoạt hình nhưng chưa kết nối chúng với khối cần thiết. Hãy để tôi nhắc bạn rằng chúng ta cần liên kết @keyframes đã viết với khối #slider. Hãy nhớ rằng chúng tôi đã quy định các phong cách cho anh ấy, đã đến lúc bổ sung thêm một vài phong cách nữa. Đặc biệt, kết nối với hoạt ảnh xảy ra bằng hai thuộc tính bắt buộc:

#slider( tên hoạt hình: thanh trượt; thời lượng hoạt ảnh: 7 giây; )

Điều này ngay lập tức đặt mọi thứ vào đúng vị trí của nó! Đầu tiên, chúng tôi liên kết hoạt ảnh thanh trượt với khối. Thứ hai, chúng tôi chỉ ra thời gian thực hiện nó. Bây giờ trình duyệt hiểu ký hiệu phần trăm và có thể đúng thời điểm thay đổi nền của khối.

Hãy thử làm mới trang và bạn sẽ thấy mọi thứ đều hoạt động! Bạn có thể có những hình ảnh khác (không phải khỉ), nhưng đó không phải là vấn đề. Tuy nhiên, hoạt ảnh sẽ chỉ được thực hiện một lần, sau đó hình ảnh sẽ không thay đổi nữa. Và đây rõ ràng không phải là thứ chúng ta cần.

Vấn đề này có thể được giải quyết rất đơn giản - bạn cần thêm một thuộc tính sẽ đặt số lần lặp lại hoạt ảnh thành vô hạn. Đây là:

Số lần lặp hoạt ảnh: vô hạn;

Như bạn hiểu, thay vì giá trị vô hạn, có thể có một số lần lặp lại cụ thể mà bạn cần. Bằng cách này, hình ảnh sẽ thay đổi liên tục và giờ đây bạn có thể tạo một thanh trượt tự động với hình ảnh bằng cách sử dụng css thuần túy. Và mặc dù chúng không thể được chuyển đổi theo cách thủ công, nhưng kỹ thuật này vẫn có thể được sử dụng trong việc xây dựng trang web, vì vậy sẽ rất hữu ích nếu biết về nó. Vâng, nó đã như vậy thay đổi phương pháp tạo một thanh trượt không có tập lệnh.

Như bạn có thể thấy, trong thay đổi css hình ảnh mà không cần sự can thiệp của người dùng là hoàn toàn có thể.