Thiết kế thanh trượt khác thường bằng cách sử dụng jquery. Thanh trượt jQuery cảm ứng đáp ứng đơn giản. Thanh trượt băng chuyền Hộp di chuyển dựa trên khung Bootstrap
Thư viện hình ảnh ở dạng thanh trượt. Khi tôi bắt đầu chuẩn bị tài liệu cho bộ sưu tập này, tôi nghĩ rằng đơn giản sẽ có hai loại tài liệu chất lượng cao, vì chủ đề phòng trưng bày hình ảnh lâu đời và rất phổ biến. Sự ngạc nhiên của tôi không còn giới hạn khi, với mỗi bản demo mới mở, hy vọng tìm được thứ gì đó tử tế tan chảy trước mắt chúng tôi. Về mặt này, sự lựa chọn không lớn nhưng theo tôi, có những mẫu vật khá thú vị. Trong số đó có cả thích nghi phòng trưng bày hình ảnh vậy sau đó phòng trưng bày.
Nhân tiện, trong chủ đề trước tôi đã tuyển chọn các plugin thư viện cho WordPress, vì vậy nếu bạn có một trang web trên WordPress, tôi nghĩ nó sẽ cực kỳ thú vị đối với bạn.
1. Phòng trưng bày đoàn kết
Miễn phí, thư viện ảnh và video thích ứng dựa trên thư viện jQuery. Trong quá trình phát triển, điểm nhấn là tính dễ sử dụng và cấu hình. Nó đi kèm với khá nhiều chủ đề chất lượng cao và quan trọng là bạn có thể viết chủ đề của riêng mình.2. Thư viện hình ảnh đáp ứng với băng chuyền hình thu nhỏ
Thư viện hình ảnh đáp ứng với chức năng vô hiệu hóa băng chuyền xem trước. Điều chỉnh theo kích thước màn hình của bạn, có trình tải trước để tải hình ảnh.
4. Thư viện hình ảnh toàn trang với jQuery
Một cái khác thư viện hình ảnh toàn màn hình. Điểm đặc biệt và “niềm say mê” của nó là chuyển động của hình ảnh toàn màn hình được phóng to tùy theo vị trí của chuột.Thanh hình thu nhỏ ở cuối màn hình sẽ tự động cuộn khi người dùng di chuyển chuột.
5. Thư viện thanh trượt với jQuery
Lý tưởng để chia phòng trưng bày thành album. Khi bạn chọn một album, hình thu nhỏ của thanh trượt hình ảnh.
6. Phòng trưng bày
Nó được thiết kế tốt thư viện hình ảnh đáp ứng, có khả năng hiển thị các thư viện ảnh và video từ Flickr, Picasa, YouTube, v.v. Hỗ trợ thiết bị di động và khả năng hoạt động ở chế độ toàn màn hình. Có thể hiển thị chữ ký. Có được trả tiềnHiện tại, thanh trượt - băng chuyền - là một chức năng cần thiết phải có trên trang web doanh nghiệp, trang web danh mục đầu tư hoặc bất kỳ tài nguyên nào khác. Cùng với thanh trượt hình ảnh toàn màn hình, thanh trượt băng chuyền ngang rất phù hợp với mọi thiết kế web.
Đôi khi thanh trượt sẽ chiếm một phần ba trang của trang. Ở đây, thanh trượt băng chuyền được sử dụng với các hiệu ứng chuyển tiếp và bố cục đáp ứng. Các trang web thương mại điện tử sử dụng thanh trượt băng chuyền để hiển thị nhiều ảnh trong các bài đăng hoặc trang riêng lẻ. Mã trượt có thể được sử dụng và sửa đổi miễn phí theo nhu cầu của bạn.
Sử dụng JQuery kết hợp với HTML5 và CSS3, bạn có thể làm cho các trang của mình thú vị hơn, cung cấp cho chúng các hiệu ứng độc đáo và thu hút sự chú ý của khách truy cập đến một khu vực cụ thể của trang web.
Slick – plugin trượt băng chuyền hiện đại
Slick là một plugin jquery có sẵn miễn phí mà các nhà phát triển khẳng định rằng giải pháp của họ sẽ đáp ứng tất cả các yêu cầu về thanh trượt của bạn. Thanh trượt thích ứng - băng chuyền có thể hoạt động ở chế độ “xếp ô” cho thiết bị di động và ở chế độ “kéo và thả” cho phiên bản máy tính để bàn.
Chứa hiệu ứng chuyển tiếp “làm mờ”, tính năng “chế độ trung tâm” thú vị, tải hình ảnh lười biếng với tính năng tự động cuộn. Chức năng cập nhật bao gồm thêm trang trình bày và bộ lọc trang trình bày. Tất cả để đảm bảo rằng bạn định cấu hình plugin theo yêu cầu của mình.
Chế độ demo | Tải xuống
Owl Carousel 2.0 – jQuery – plugin để sử dụng trên các thiết bị cảm ứng
Plugin này có một bộ chức năng lớn, phù hợp cho cả người mới bắt đầu và nhà phát triển có kinh nghiệm. Đây là phiên bản cập nhật của thanh trượt băng chuyền. Người tiền nhiệm của ông có cùng tên.
Thanh trượt có một số plugin tích hợp để cải thiện chức năng tổng thể. Hoạt ảnh, phát lại video, tự động phát thanh trượt, tải chậm, điều chỉnh độ cao tự động – đây là những tính năng chính của Owl Carousel 2.0.
Hỗ trợ kéo và thả được bao gồm để sử dụng plugin thuận tiện hơn trên thiết bị di động.
Plugin này hoàn hảo để hiển thị hình ảnh lớn ngay cả trên màn hình nhỏ của thiết bị di động.
Ví dụ | Tải xuống
Plugin jQuery Silver Track
Một plugin jquery khá nhỏ nhưng giàu chức năng cho phép bạn đặt một thanh trượt trên một trang - một băng chuyền, có lõi nhỏ và không tiêu tốn nhiều tài nguyên trang web. Plugin có thể được sử dụng để hiển thị các thanh trượt dọc và ngang, với hình ảnh động và tạo bộ hình ảnh từ thư viện.
Ví dụ | Tải xuống
AnoSlide – Thanh trượt jQuery đáp ứng cực kỳ nhỏ gọn
Thanh trượt jQuery siêu nhỏ gọn - băng chuyền, chức năng của nó lớn hơn nhiều so với thanh trượt thông thường. Chúng bao gồm xem trước một hình ảnh, hiển thị băng chuyền nhiều hình ảnh và hiển thị thanh trượt dựa trên tiêu đề.
Ví dụ | Tải xuống
Owl Carousel – Thanh trượt Jquery – băng chuyền
Owl carousel là một thanh trượt hỗ trợ màn hình cảm ứng và công nghệ kéo thả, dễ dàng tích hợp vào mã HTML. Plugin này là một trong những thanh trượt tốt nhất cho phép bạn tạo các băng chuyền đẹp mắt mà không cần bất kỳ đánh dấu nào được chuẩn bị đặc biệt.
Ví dụ | Tải xuống
Thư viện 3D - băng chuyền
Sử dụng chuyển tiếp 3D dựa trên kiểu CSS và một ít mã Javascript.
Ví dụ | Tải xuống
Băng chuyền 3D sử dụng TweenMax.js và jQuery
Băng chuyền 3D tuyệt đẹp. Có vẻ như đây vẫn là phiên bản beta vì tôi vừa phát hiện ra một số vấn đề với nó. Nếu bạn quan tâm đến việc thử nghiệm và tạo thanh trượt của riêng mình, băng chuyền này sẽ là một trợ giúp tuyệt vời.
Ví dụ | Tải xuống
Băng chuyền sử dụng bootstrap
Thanh trượt đáp ứng - băng chuyền sử dụng công nghệ bootstrap chỉ dành cho trang web mới của bạn.
Ví dụ | Tải xuống
Thanh trượt băng chuyền hộp di chuyển dựa trên khung Bootstrap
Phổ biến nhất trên các trang web danh mục đầu tư và kinh doanh. Loại thanh trượt này - băng chuyền - thường được tìm thấy trên bất kỳ loại trang web nào.
Ví dụ | Tải xuống
Thanh trượt vòng tròn nhỏ
Thanh trượt có kích thước nhỏ bé này sẵn sàng hoạt động trên các thiết bị có độ phân giải màn hình bất kỳ. Thanh trượt có thể hoạt động ở cả chế độ vòng tròn và băng chuyền. Vòng tròn nhỏ được trình bày như một sự thay thế cho các thanh trượt khác thuộc loại này. Có hỗ trợ tích hợp cho hệ điều hành iOS và Android.
Ở chế độ hình tròn, thanh trượt trông khá thú vị. Hỗ trợ tuyệt vời cho phương pháp kéo và thả và hệ thống cuộn trang trình bày tự động.
Ví dụ | Tải xuống
Thanh trượt nội dung Thumbelina
Thanh trượt băng chuyền mạnh mẽ, có khả năng thích ứng, hoàn hảo cho một trang web hiện đại. Hoạt động chính xác trên mọi thiết bị. Có chế độ ngang và dọc. Kích thước của nó được giảm thiểu xuống chỉ còn 1 KB. Plugin siêu nhỏ gọn cũng có khả năng chuyển tiếp mượt mà tuyệt vời.
Ví dụ | Tải xuống
Wow – thanh trượt – băng chuyền
Chứa hơn 50 hiệu ứng, có thể giúp bạn tạo thanh trượt gốc cho trang web của mình.
Ví dụ | Tải xuống
Thanh trượt nội dung jQuery đáp ứng bxSlider
Thay đổi kích thước cửa sổ trình duyệt của bạn để xem thanh trượt thích ứng như thế nào. Bxslider có hơn 50 tùy chọn tùy chỉnh và thể hiện các tính năng của nó bằng nhiều hiệu ứng chuyển tiếp khác nhau.
Ví dụ | Tải xuống
jCarousel
jCarousel là một plugin jQuery sẽ giúp tổ chức việc xem hình ảnh của bạn. Bạn có thể dễ dàng tạo băng chuyền hình ảnh tùy chỉnh từ cơ sở được hiển thị trong ví dụ. Thanh trượt có khả năng thích ứng và tối ưu hóa để hoạt động trên nền tảng di động.
Ví dụ | Tải xuống
Hộp cuộn - plugin jQuery
Scrollbox là một plugin nhỏ gọn để tạo thanh trượt - băng chuyền hoặc thu thập thông tin văn bản. Các tính năng chính bao gồm các hiệu ứng cuộn dọc và ngang khi tạm dừng khi di chuột qua.
Ví dụ | Tải xuống
dbpasBăng chuyền
Một thanh trượt băng chuyền đơn giản. Nếu bạn cần một plugin nhanh thì plugin này phù hợp 100%. Chỉ đi kèm với các tính năng cơ bản cần thiết để thanh trượt hoạt động.
Ví dụ | Tải xuống
Flexisel: Plugin thanh trượt JQuery đáp ứng - Băng chuyền
Những người tạo ra Flexisel lấy cảm hứng từ plugin jCarousel cũ, tạo một bản sao của nó nhằm mục đích vận hành chính xác thanh trượt trên thiết bị di động và máy tính bảng.
Bố cục đáp ứng của Flexisel, khi chạy trên thiết bị di động, khác với bố cục có kích thước cửa sổ trình duyệt. Flexisel được điều chỉnh hoàn hảo để hoạt động trên màn hình, cả độ phân giải thấp và cao.
Ví dụ | Tải xuống
Elastislide – thanh trượt thích ứng – băng chuyền
Elastislide thích ứng hoàn hảo với kích thước màn hình thiết bị của bạn. Bạn có thể đặt số lượng hình ảnh tối thiểu được hiển thị ở độ phân giải cụ thể. Hoạt động tốt như một thanh trượt băng chuyền cho các thư viện hình ảnh, sử dụng trình bao bọc cố định cùng với hiệu ứng cuộn dọc.
Ví dụ | Tải xuống
FlexSlider 2
Thanh trượt phần mềm miễn phí từ Woothemes. Nó được coi là một trong những thanh trượt thích ứng tốt nhất. Plugin chứa một số mẫu và sẽ hữu ích cho cả người dùng mới làm quen và chuyên gia.
Ví dụ | Tải xuống
Băng chuyền tuyệt vời
Amazing Carousel – thanh trượt hình ảnh đáp ứng sử dụng jQuery. Hỗ trợ nhiều hệ thống quản lý nội dung như WordPress, Drupal và Joomla. Cũng hỗ trợ Android và iOS và hệ điều hành máy tính để bàn mà không có bất kỳ vấn đề tương thích nào. Các mẫu băng chuyền tuyệt vời được tích hợp sẵn cho phép bạn sử dụng thanh trượt ở chế độ dọc, ngang và tròn.
Ví dụ | Tải xuống
Chúng ta cần thêm các nút chuyển tiếp và quay lại.
Để làm điều này, bạn cần bổ sung mã đã viết trước đó.
Mã HTML cho thanh trượt mới
Toàn bộ cấu trúc thanh trượt sẽ được giữ nguyên. Hai vùng chứa sẽ được thêm vào phần đánh dấu, chúng sẽ đóng vai trò là các nút.
Kiểu trượt
Các nút sẽ thay thế vị trí của chúng do vị trí tuyệt đối so với container.slider-box
Hộp trượt(vị trí: tương đối ; chiều rộng : 320px ; chiều cao : 210px ; tràn : ẩn ; ) .slider( vị trí : tương đối ; chiều rộng : 10000px ; chiều cao : 210px ; ) .slider img( float : left ; ) .slider-box .prev , .slider-box .next( vị trí : tuyệt đối ; trên cùng : 100px ; hiển thị : khối ; chiều rộng : 29px ; chiều cao : 29px ; con trỏ : con trỏ ; ) .slider-box .prev( trái : 10px ; nền : url ( ../images/slider_controls.png ) không lặp lại 0 0 ; ) .slider-box .next( phải : 10px ; nền : url (../images/slider_controls.png ) không lặp lại -29px 0 ; )
Kịch bản
Thanh trượt tự động cuộn. Theo mặc định, chuyển động đi từ trái sang phải, nhưng nếu cần, bạn có thể thay đổi hướng chuyển động của nó bằng cách sử dụng biến hướng. Khi giá trị của biến thay đổi từ 1 thành -1 thì hướng chuyển động của thanh trượt sẽ thay đổi.
Hình ảnh trong thanh trượt không được thay đổi khi con trỏ ở trong thanh trượt. Tại sao việc này lại được thực hiện? Nó đơn giản. Nếu con trỏ chuột nằm trên thanh trượt, điều đó có nghĩa là khách truy cập trang web quan tâm đến nội dung của nó. Lúc này, bạn không nên tự động thay đổi slide.
$(function () ( var thanh trượt = $(".slider" ) , thanh trượtContent = thanh trượt.html () , // Nội dung thanh trượt slideWidth = $(".slider-box" ) .outerWidth() , // Chiều rộng thanh trượt slideCount = $(".slider img" ) .length , // Số slide prev = $(".slider-box .prev" ) , // Nút quay lại next = $(".slider-box .next" ) , // Nút chuyển tiếp thanh trượtInterval = 3300, // Khoảng thời gian thay đổi slide thời gian hoạt hình = 1000, // Thời gian thay đổi slide khóa học = 1, // Hướng di chuyển của thanh trượt (1 hoặc -1) lề = - slideWidth; // Độ lệch trượt ban đầu$(".slider img:last" ) .clone () .prependTo ("".slider" ) ; // Bản sao của slide cuối cùng được đặt ở đầu.$(".slider img" ) .eq (1) .clone () .appendTo ("".slider" ) ; // Bản sao của slide đầu tiên được đặt ở cuối.$(".slider" ) .css ("lề trái", - slideWidth) ; // Container.slider được dịch chuyển sang trái theo chiều rộng của một slide. hàm nextSlide() ( // Hàm animation() được khởi chạy để thay đổi slide. interval = window.setInterval(animate, SliderInterval); ) hàm animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Nếu thanh trượt đã đến cuối Slider.css (( "marginLeft" :- slideWidth) ); // sau đó block.slider trở về vị trí ban đầu lề=- slideWidth* 2 ; ) khác nếu (lề== 0 && khóa học==- 1 ) ( // Nếu thanh trượt ở đầu và nhấn nút quay lại Slider.css (( "marginLeft" :- slideWidth* slideCount) ); // sau đó block.slider di chuyển đến vị trí cuối cùng lề=- slideWidth* slideCount+ slideWidth; ) khác ( // Nếu các điều kiện trên không thỏa mãn, lề = lề - slideWidth* (khóa học); // giá trị lề được đặt để hiển thị slide tiếp theo) thanh trượt.animate (( "marginLeft" : lề) , animateTime) ; // Block.slider được dịch sang trái 1 slide.) hàm trượtStop() ( // Hàm dừng thanh trượt window.clearInterval(khoảng); ) trước.click (hàm () ( // Đã nhấn nút quay lại var Course2 = khóa học; khóa học = - 1; hoạt hình(); // Gọi hàm animate() khóa học = khóa học2; ) ) ; next.click(function()( // Đã nhấn nút quay lại if (slider.is (":animated" ) ) ( return false ; ) // Nếu không có hoạt ảnh xảy ra var Course2 = khóa học; // Biến tạm thời để lưu trữ giá trị khóa học khóa học = 1; // Đặt hướng của thanh trượt từ phải sang trái hoạt hình(); // Gọi hàm animate() khóa học = khóa học2; // Biến khóa học nhận giá trị ban đầu) ) ; Slider.add(next).add(prev).hover(function()( // Nếu con trỏ chuột nằm trong thanh trượt thanh trượtStop() ; // Hàm SliderStop() được gọi để tạm dừng thanh trượt) , nextSlide) ; // Khi con trỏ rời khỏi thanh trượt, hoạt ảnh sẽ tiếp tục. nextSlide() ; // Gọi hàm nextSlide() } ) ;Kết quả là một thanh trượt có các nút tiến và lùi.
Từ tác giả: Bất chấp những tin đồn về sự "khai tử" của phần trang web hiển thị mà không cần cuộn, nhu cầu về một thanh trượt tốt vẫn không biến mất. Hãy thành thật mà nói - thanh trượt rất thú vị. Ngoài ra, không có gì khác, không giống như việc di chuyển nội dung, gây ra hiệu ứng “wow” cho người dùng. Tất cả các thanh trượt là một tập hợp nhiều slide thay thế lẫn nhau và điều cực kỳ quan trọng là mã thanh trượt càng nhẹ càng tốt. Trong những trường hợp như vậy, jQuery sẽ giúp chúng ta.
Hãy xem 20 thanh trượt jQuery từ Envato Market và bạn sẽ nhận ra rằng có những thanh trượt không chỉ là một khối hình ảnh trôi chảy qua chúng.
1. RoyalSlider – Thư viện hình ảnh màn hình cảm ứng sử dụng jQuery
Ngày nay, một thanh trượt đáp ứng cũng thân thiện với màn hình cảm ứng có ý nghĩa nhiều hơn trước. RoyalSlider kết hợp cả hai tính năng: khả năng phản hồi và chức năng màn hình cảm ứng. Một lựa chọn tốt vì thư viện được viết bằng HTML5 và CSS3.
Một số tính năng thú vị:
Làm thế nào để tự tạo một trang web?
Tối ưu hóa SEO
Tùy biến cao
Hơn 10 mẫu khởi đầu
Có một dự phòng cho quá trình chuyển đổi CSS3
Theo tôi, tính năng thú vị nhất là “kiến trúc tập lệnh mô-đun”, cho phép bạn loại trừ những thứ không cần thiết khỏi tệp JS chính, do đó giảm trọng lượng. RoyalSlider, một thư viện hình ảnh màn hình cảm ứng trong JQuery, là một thanh trượt JavaScript mạnh mẽ nên bổ sung vào bộ công cụ của bất kỳ nhà phát triển nào.
2. Plugin jQuery đáp ứng Slider Revolution
Để làm được điều gì đó “mang tính cách mạng” bằng thanh trượt không phải là điều dễ dàng. Khi nói đến thanh trượt, có rất nhiều tính năng bạn có thể thêm vào chúng. Tuy nhiên, Slider Revolution là một thử nghiệm thực sự tốt. Trong số các thanh trượt jQuery, phiên bản này đáp ứng tất cả các yêu cầu có thể có của bạn.
Danh sách các tính năng của thanh trượt rất lớn, vì vậy tôi sẽ chỉ liệt kê những tính năng tốt nhất:
Hiệu ứng thị sai và hoạt ảnh tùy chỉnh
Không giới hạn số lớp và slide có liên kết
sẵn sàng để sử dụng, phong cách tùy biến sâu
và nhiều hơn nữa
Khả năng thêm hình ảnh, trình phát video được nhúng và các liên kết mạng xã hội khiến Slider Revolution trở thành một trong những tùy chọn linh hoạt và có thể tùy chỉnh nhất trên web.
3. Plugin thanh trượt jQuery thích ứng LayerSlider
Cái tên “plugin thanh trượt jQuery thích ứng LayerSlider” không thể thực sự đánh giá được thanh trượt này.
Hơn 200 hiệu ứng chuyển tiếp 2D và 3D giữa các slide sẽ khiến bất kỳ ai cũng phải chú ý.
Một vài tính năng đáng chú ý:
13 giao diện và 3 loại menu
Khả năng đặt một hình ảnh cố định lên trên thanh trượt
Và dự phòng jQuery
Và nhiều hơn nữa
Giống như thanh trượt trước, bạn có thể thêm hầu hết mọi nội dung, ngay cả nội dung đa phương tiện thường trú HTML5. LayerSlider mang các thanh trượt vào cuộc sống và rất đẹp.
4. Công cụ quay vòng/trình chiếu biểu ngữ jQuery
Công cụ quay vòng / trình chiếu biểu ngữ jQuery là một thanh trượt khá đơn giản không làm mất đi chức năng chính.
Khả năng:
Chú giải công cụ, chèn văn bản, v.v.
Xem trước và các tùy chọn khác nhau để xem các thành phần
Hẹn giờ có độ trễ cho một thanh trượt hoặc tất cả
Nhiều hiệu ứng chuyển tiếp cho tất cả các trang chiếu hoặc các hiệu ứng chuyển tiếp khác nhau cho từng trang riêng lẻ
Công cụ quay vòng / trình chiếu biểu ngữ jQuery, so với các thanh trượt JQuery khác, chỉ có các khả năng cơ bản, nhưng bạn không nên quên nó.
5. All In One Slider – Plugin thanh trượt jQuery đáp ứng
Bất kỳ thanh trượt nào xuất hiện trên Internet đều có tầm nhìn riêng và giải quyết mọi vấn đề trong lĩnh vực của nó. Nhưng không phải cái này. All In One Slider có thể được gọi là “bao gồm tất cả”.
Tôi nghĩ hầu hết các nhà phát triển và thiết kế web đều có giải pháp đã được chứng minh, nhưng họ luôn tìm kiếm thứ gì đó mới mẻ. Và “điều gì đó mới mẻ” này bao gồm:
Công cụ quay vòng biểu ngữ
Biểu ngữ có bản xem trước
Biểu ngữ có danh sách phát
Thanh trượt nội dung
băng chuyền
Tất cả các loại thanh trượt đều hỗ trợ hầu hết, nếu không phải tất cả, chức năng mà thanh trượt jQuery yêu cầu. All In One Slider có phải là giải pháp trọn gói dành cho bạn không?
6. UnoSlider – Thanh trượt màn hình cảm ứng thích ứng
Nếu thanh trượt của bạn không phản hồi và không hỗ trợ màn hình cảm ứng thì bạn đã chọn nhầm thanh trượt. UnoSlider là chính xác.
Thanh trượt này đã tìm thấy vị trí của mình giữa sự đơn giản và tập hợp chức năng phong phú. Chức năng:
Hỗ trợ chủ đề
12 chủ đề làm sẵn
40 lần chuyển tiếp
Hỗ trợ IE6+
Tất cả các tính năng đều tập trung vào thiết kế và kiểu dáng, khiến UnoSlider trở thành một thanh trượt nội dung tuyệt vời với khả năng thêm chủ đề.
7. Master Slider - Thanh trượt màn hình cảm ứng jQuery
Bạn đang tìm kiếm “một thanh trượt jQuery để thống trị tất cả”? Hãy dùng thử Master Slider - Thanh trượt màn hình cảm ứng JQuery cho các kích cỡ màn hình khác nhau...
Khi nói đến thiết kế tốt, ví dụ này là một trong những ví dụ tốt nhất:
Hơn 25 mẫu
Chuyển đổi tăng tốc phần cứng
Hỗ trợ chạm và vuốt
Và nhiều hơn nữa
Các chuyển tiếp tương tác, các lớp hoạt ảnh và các điểm nóng chắc chắn sẽ thu hút sự chú ý của bạn. Master Slider là một tác phẩm nghệ thuật.
8. TouchCarousel - Thanh trượt và thanh trượt nội dung jQuery
TouchCarousel cung cấp hỗ trợ và cập nhật miễn phí. Tuy nhiên, đó không phải là tất cả các tính năng của thanh trượt băng chuyền jQuery nhẹ này.
Nếu có từ “chạm” trong tên, bạn có thể đoán rằng thanh trượt hoàn toàn thích ứng và hỗ trợ chạm. Các tính năng khác:
Tối ưu hóa SEO
Tự động phát thông minh
Chuyển đổi CSS3 với khả năng tăng tốc phần cứng
Tùy chỉnh giao diện người dùng và 4 giao diện cho Photoshop
TouchCarousel, nhờ khả năng cuộn trang trượt vật lý độc đáo, đưa trải nghiệm di động lên một tầm cao hoàn toàn mới.
9. Thanh trượt nâng cao - Thanh trượt jQuery XML
Thanh trượt jQuery không chỉ có thể được sử dụng trên các trang web. Chúng cũng có thể hữu ích trong các ứng dụng web. Thanh trượt nâng cao cho phép bạn thực hiện việc này.
Với đánh dấu HTML hoặc XML, thanh trượt nâng cao này tạo ấn tượng lâu dài:
Lớp hoạt hình và video thông minh
Hơn 100 hiệu ứng chuyển tiếp và hơn 150 thuộc tính tùy chỉnh
15 giao diện thanh trượt, 7 giao diện thanh cuộn và hỗ trợ hộp đèn tích hợp
Điều hướng bàn phím, hỗ trợ cảm ứng và tùy chỉnh đầy đủ
Và nhiều hơn nữa
Tuy nhiên, tính năng tốt nhất là Advanced Slider - jQuery XML Slider API, khiến nó trở thành một tùy chọn thanh trượt lý tưởng cho ứng dụng web của bạn.
10. Hiệu ứng phóng to/thu nhỏ thanh trượt jQuery Hoàn toàn đáp ứng
Một trong những thanh trượt jQuery sẽ khiến bạn xem bản demo trước khi bắt đầu đọc về các tính năng của nó. Bạn chỉ muốn hiểu “hiệu ứng phóng to/thu nhỏ” này nghĩa là gì.
Hiệu ứng thu phóng khá yếu nhưng nó tạo thêm cảm giác kiểm soát và cảm giác chân thực cho hình ảnh trong khi phần còn lại của thanh trượt là tĩnh. Tính năng đặc biệt của thanh trượt:
Chuyển tiếp lớp CSS3
Tùy chọn kết thúc hoạt ảnh cho các lớp
Đã sửa lỗi chiều rộng, toàn màn hình và tùy chọn chiều rộng đầy đủ
Văn bản hoạt hình có định dạng HTML và CSS
Hầu hết các thanh trượt đều cố gắng kết hợp nhiều hiệu ứng nhất có thể, nhưng Hiệu ứng Phóng to/Thu nhỏ Thanh trượt jQuery Hoàn toàn đáp ứng chỉ có hiệu ứng Ken Burns, nhưng nó được triển khai tốt.
11. Tiến hóa băng chuyền jQuery
Giống như Thanh trượt nâng cao đã nói ở trên - Thanh trượt XML jQuery, jQuery Carousel Evolution có API riêng có thể được sử dụng để nâng cao chức năng hoặc tích hợp thanh trượt vào một dự án khác.
Làm thế nào để tự tạo một trang web?
Ngày nay cần có những công nghệ và kiến thức nào để tự mình tạo ra các trang web? Tìm hiểu ở chuyên sâu!
Với hình ảnh, đánh dấu HTML, video YouTube và Vimeo, bạn cũng sẽ nhận được:
Tối ưu hóa SEO
9 kiểu băng chuyền
Hiệu ứng đổ bóng và phản chiếu
Kích thước hình ảnh có thể được điều chỉnh, cả mặt trước và mặt sau
jQuery Carousel Evolution là một băng chuyền đơn giản với nhiều trường hợp sử dụng.
12. Thanh trượt gợi cảm
Sexy Slider không còn gợi cảm như trước nữa. Tuy nhiên, do đã cũ nên thanh trượt này đáng tin cậy.
Thanh trượt thoạt nhìn không ấn tượng lắm nhưng nếu bạn tùy chỉnh tốt, nó sẽ hoàn toàn phù hợp với thiết kế của bạn. Khả năng:
Tự động phát slide
Chú thích hình ảnh
Phát lại slide liên tục
6 hiệu ứng chuyển tiếp
Sexy Slider đang chờ bạn khai thác toàn bộ sức mạnh và tiềm năng của nó.
13. Thanh cuộn nội dung và hình ảnh jQuery có hộp đèn
Với tất cả các thiết kế thân thiện với thiết bị di động và hỗ trợ màn hình cảm ứng này, thật tuyệt khi thấy thanh trượt jQuery không quên máy tính để bàn.
jQuery Image & Content Scroller w/Lightbox hỗ trợ nhập liệu bằng bàn phím và con lăn chuột, cũng như các tính năng khác:
Hướng ngang và dọc
Chú thích văn bản bên trong hoặc bên ngoài thanh trượt
Khả năng thiết lập một số lượng slide nhất định hiển thị cùng một lúc
Hình ảnh nội tuyến, Flash, iframe, Ajax và nội dung nội tuyến
Thanh trượt cũng có hộp đèn tích hợp. Nếu muốn, trong jQuery Image & Content Scroller w/Lightbox, bạn không thể tự khởi chạy thanh trượt mà phải khởi chạy hộp đèn riêng biệt.
14. Translucent – Công cụ xoay/thanh trượt biểu ngữ thích ứng
Hầu hết các thanh trượt jQuery đều có thiết kế riêng. Bạn có thể tùy chỉnh nó cho riêng mình, nhưng đôi khi bạn chỉ muốn mọi thứ nằm bên trong thanh trượt. Chúng tôi giới thiệu với bạn Translucent.
Thanh trượt có rất nhiều cài đặt trước. Bạn có thể chỉ cần đặt một số cài đặt nhất định và thế là xong. Khả năng:
6 phong cách khác nhau
4 hiệu ứng chuyển tiếp
2 lần chuyển tiếp vuốt
Các nút và chú thích có thể tùy chỉnh
Giống như những thanh trượt khác, thanh trượt này nhạy cảm với cảm ứng, phản hồi nhanh và được tăng tốc phần cứng. Translucent là một thanh trượt có thiết kế tối giản đặt nội dung lên hàng đầu.
15. FSS – Plugin trang web trượt toàn màn hình
Bạn có muốn tạo một trang web toàn màn hình bao gồm các slide không? Sau đó, bạn cần FSS.
Trên thực tế, bằng cách sử dụng thanh trượt JQuery này, việc tạo một trang web thanh trượt toàn màn hình cực kỳ dễ dàng. Khả năng:
Hỗ trợ AJAX
Thanh cuộn
Hỗ trợ công nghệ liên kết sâu
2 hiệu ứng chuyển tiếp khác nhau
Điều đáng chú ý là hỗ trợ bàn phím và hướng dẫn 11 trang. Tuy nhiên, ấn tượng thực sự là trọng lượng của FSS, chỉ 5Kb.
16. Zozo Accordion – Thanh trượt màn hình cảm ứng thích ứng
Một ví dụ khác về thanh trượt jQuery tập trung vào kiểu dáng và hoạt động tốt. Zozo Accordion là sản phẩm không thể bỏ qua đối với những ai đang tìm kiếm một chiếc đàn accordion trượt tốt với khả năng thay đổi kiểu dáng.
Vẻ đẹp hoạt hình CSS3 này cũng có khá nhiều tính năng:
Đàn accordion ngang và dọc
Tối ưu hóa HTML5 và SEO ngữ nghĩa
Hỗ trợ cảm ứng, bàn phím và WAI-ARIA
Hơn 10 giao diện và 6 bố cục
Và nhiều hơn nữa
Zozo Accordion có hỗ trợ miễn phí và cập nhật liên tục, cũng như tất cả các tính năng bạn muốn có trong jQuery accordion.
17. Plugin thanh trượt OneByOne đáp ứng jQuery
Plugin jQuery Responsive OneByOne Slider giống một hoạt ảnh đơn giản hơn là một thanh trượt. Thay vì hiển thị từng trang chiếu một, phiên bản này sẽ lấp đầy màn hình bằng các trang chiếu lần lượt từng bước cho đến khi không còn chỗ trống trong khu vực trước khi chuyển sang trang chiếu tiếp theo.
Hoạt ảnh CSS3 chạy dưới Animate.css, nhẹ, bao gồm nhiều lớp và thân thiện với thiết bị di động. Nhiều tính năng:
Ngoài ra còn có tùy chọn điều hướng kéo và thả. Plugin OneByOne Slider đáp ứng jQuery được cung cấp bởi Twitter Bootstrap Carousel.
18. Accordionza - plugin jQuery
Không có thanh trượt jQuery nào dễ dàng hơn thế này. Để vận hành, bạn chỉ cần tải xuống 3Kb thanh trượt, điều này khiến Accordionza trở thành thanh trượt accordion nhẹ nhất.
Nếu không thích ba tùy chọn kiểu dáng, bạn có thể tự điều chỉnh HTML và CSS. Khả năng:
Điều hướng bàn phím
Dễ dàng tùy chỉnh các hiệu ứng và nút
Kỹ thuật nâng cao lũy tiến - hoạt động mà không cần JavaScript
Hãy nhớ rằng Accordionza có thể hiển thị nhiều biến thể của nội dung hỗn hợp, khiến nó cực kỳ linh hoạt.
19. hùngSlider – Thanh trượt đa năng đáp ứng
MightySlider là một thanh trượt thực sự mạnh mẽ. Nó có thể được sử dụng không chỉ như một thanh trượt hình ảnh đơn giản mà còn như một thanh trượt một chiều toàn màn hình với điều hướng mục menu. Với sự trợ giúp của nó, bạn có thể tạo một trang web một trang tuyệt vời.
Dưới mui xe, bạn sẽ tìm thấy nhiều tùy chọn:
Hỗ trợ bàn phím, chuột và cảm ứng
Chuyển đổi CSS3 với khả năng tăng tốc phần cứng
Làm sạch đánh dấu hợp lệ và tối ưu hóa SEO
Không giới hạn số lượng slide, lớp chú thích và hiệu ứng cho chúng
API rất mạnh mẽ và thân thiện với nhà phát triển, mở ra nhiều cách khác nhau để sử dụng nó. MightySlider là một thanh trượt jQuery tiến bộ, tuyệt vời với mã rõ ràng và được nhận xét tốt.
20. Parallax Slider - Plugin jQuery đáp ứng
Parallax Slider hoạt động giống như Plugin OneByOne Slider đáp ứng của jQuery và cho phép bạn tạo hiệu ứng động cho từng lớp riêng biệt trong một slide duy nhất. Bạn có thể tạo hoạt ảnh cho tất cả các trang chiếu hoặc thậm chí chỉ một trang bằng cách thêm hoạt ảnh thị sai.
Bộ này bao gồm 4 thanh trượt thuộc nhiều loại khác nhau, tất cả đều có hiệu ứng thị sai. Giống như các thanh trượt jQuery khác, nó có:
Hoàn toàn tùy biến
Hỗ trợ cảm ứng
Đáp ứng đầy đủ, các lớp không giới hạn
Tự động phát, lặp lại, điều chỉnh chiều cao và chiều rộng và hẹn giờ
Các lớp hoạt hình không chỉ có văn bản hoặc hình ảnh. Bạn cũng có thể thêm video YouTube, Vimeo và HTML5. Parallax Slider là một ví dụ điển hình khác về cách bạn có thể mô phỏng các hiệu ứng Flash thậm chí còn tốt hơn chính Flash, vốn cũng được hỗ trợ trên tất cả các thiết bị.
Phần kết luận
Thật thú vị khi thấy các thanh trượt jQuery đã phát triển như thế nào từ một thứ chỉ đơn giản là thay thế hình ảnh này bằng hình ảnh khác thành một bộ công cụ sáng tạo khổng lồ. Hiện nay có thanh trượt 3D, thị sai, thanh trượt toàn trang, thanh trượt thích ứng và những thanh trượt có thể xem được trên cả máy tính để bàn và điện thoại thông minh.
Nếu bạn không thích bất kỳ thanh trượt nào trong danh sách này, bạn luôn có thể tham gia Hướng dẫn viết mã jQuery trên Envato và thiết kế thứ gì đó hoàn toàn mới và độc đáo.
Hoặc xem các thanh trượt khác trên Envato Market - có rất nhiều để lựa chọn. Thanh trượt jQuery yêu thích của bạn là gì và tại sao?
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ả về các 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 đi kèm 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
Thanh trượt đáp ứng Jssor
Gần đây tôi đã biết đến 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:
- Thanh trượt thích ứng;
- Thiết kế phẳng;
- Thay đổi ngẫu nhiên các slide;
- Toàn quyền truy cập vào mã nguồn.
Bản trình diễn | Tải xuống
Thanh trượt chữ A
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
WOW Slider là một thanh trượt hình ảnh jQuery đáp ứng với các hiệu ứng hình ảnh tuyệt vời ( domino, xoay, làm mờ, lật và nhấp nháy, 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ị;
- Hỗ trợ các 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 xếp chồng 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
Plugin đơn giản và nhỏ gọn ( kích thước chỉ 1 KB), tạo thanh trượt phản hồi 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 - thanh trượt jQuery miễn phí
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 biểu tượng màu sắc khác nhau.
Demo |Tải xuống
SlidesJS, plugin jQuery đáp ứng
SlidesJS là một plugin đáp ứng dành cho JQuery (1.7.1 trở lên) với sự hỗ trợ cho các 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ụ có sẵn sẽ 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);
- Lệnh gọi lại API và các phương thức 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. Phiên bản mới đã được cải tiến nhằm tăng tốc độ và sự gọn nhẹ.
Bản trình diễn | Tải xuống
Galleria - Thư viện ảnh phản hồi dựa trên JavaScript
Galleria được sử dụng trên hàng triệu trang web để tạo ra các thư viện hình ảnh 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.
