Tạo một thanh trượt trong JavaScript bằng chính đôi tay của bạn. Plugin băng chuyền jQuery thành công nhất
Nhưng vì chúng ta đang tìm hiểu những kiến thức cơ bản về JS nên để nghiên cứu cơ sở này, tôi sẽ mô tả cách tạo thanh trượt đơn giản chỉ với sự giúp đỡ Ngôn ngữ JavaScript. Nào, hãy bắt đầu phân tích tài liệu!
Có những loại thanh trượt nào và chúng có thể cần thiết ở đâu?Việc tạo các thư viện thuận tiện để xem hình ảnh là bắt buộc trên tất cả các dịch vụ web có chứa ít nhất một số bức ảnh. Đây có thể là các cửa hàng trực tuyến, trang danh mục đầu tư, dịch vụ tin tức và giáo dục, trang web của các công ty và cơ sở giải trí có báo cáo hình ảnh, v.v.
Tuy nhiên điều này ứng dụng tiêu chuẩn thanh trượt. Những công nghệ như vậy cũng được sử dụng để thu hút khách hàng đến với hàng hóa, dịch vụ khuyến mại hoặc để mô tả lợi thế của doanh nghiệp.
Hầu hết, khách hàng yêu cầu triển khai nó trên các phòng trưng bày kiểu “Carousel”. Cái này công cụ tiện dụngđể xem hình ảnh ở kích thước lớn với khả năng người dùng chuyển đổi các slide tiến và lùi. Trong trường hợp này, các hình ảnh thường tự động chuyển đổi sau một thời gian nhất định. Cơ chế này được đặt biệt danh do việc hiển thị hình ảnh được lặp lại theo hình tròn.
Ngày nay, nếu muốn, bạn có thể tìm thấy các plugin khác thường và hấp dẫn nhất trên Internet để xem một bộ ảnh.
Hoạt động độc lậpChà, bây giờ hãy bắt đầu tạo thanh trượt của riêng chúng ta. Ở giai đoạn học tập này, để triển khai nó, tôi khuyên bạn nên sử dụng các tệp . Nó sẽ là công tắc tự động hình ảnh trong một vòng tròn.
Dưới đây tôi đã đính kèm Mã chương trìnhứng dụng của bạn. Tôi đã để lại nhận xét cho bạn khi tôi viết mã.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Trình chuyển đổi hình ảnh tự động /*Mô tả vẻ bề ngoài frame, cơ sở cho thanh trượt trong tương lai */ #slides( vị trí: tương đối; chiều cao: 415px; chiều rộng: 100%; phần đệm: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue , 0 0 15px #010, 0 0 35px #010; ) /* Tôi chỉnh sửa hiển thị của ảnh*/ img ( width: auto; Height: 390px; buffer: 13px; ) /* Tôi chỉ ra rằng nội dung của danh sách các mục sẽ được hiển thị ở giữa phần tử- cha, tức là trong trường hợp này, ở giữa phần tử ul - cơ sở cho các slide */ li ( text-align: center; ) /* Tôi mô tả hình thức của chính các slide */ .slide( location: tuyệt đối; opacity: 0 ; trên cùng: 0px; bên trái: 0px; chiều cao: 100%; chỉ mục z: 3; chiều rộng: 100%; nền: màu xanh; -moz-transition: độ mờ 1,5 giây; chuyển tiếp: độ mờ 1,5 giây; -webkit-transition: độ mờ 1,5s; ) /*Khi hiển thị một đối tượng sẽ hiển thị và di chuyển lên nền trước*/ .showing( opacity: 1; z-index: 4; )
Tôi hy vọng bạn không gặp vấn đề gì với mã css và html. Nhưng tôi thấy cần phải tháo rời công việc của kịch bản. Vì vậy, hãy chuyển sang giải mã những gì đã được viết.
Vì vậy, trước tiên, bằng cách sử dụng phương thức querySelectorAll, tôi gán cho biến MySlider một danh sách tất cả các phần tử trong phạm vi đã chỉ định. Cho biết mục này
document.querySelectorAll("#slides .slide")
Do đó, MySlider lưu trữ một bộ sưu tập gồm bốn phần tử.
Tiếp theo, tôi chỉ định hình ảnh nào sẽ bắt đầu hiển thị bằng cách đặt biến currentPicture về 0. Sau đó, tôi chỉ ra rằng sự thay đổi trang chiếu xảy ra sau 2,7 giây và chức năng xử lý trang chiếu tiếp theo phải được gọi.
Hãy chuyển sang chức năng của chính nó.
Ban đầu, đối với thành phần danh sách hiện tại, tôi thay đổi mô tả của các lớp, tức là Tôi viết lại “trình chiếu” thành “slide”. Kết quả là hình ảnh trở nên vô hình.
Bây giờ tôi xác định phần tử mới bộ sưu tập sẽ được hiển thị trên màn hình. Để làm điều này tôi lấy vị trí hiện tại +1. Bạn có thể nhận thấy rằng tôi cũng sử dụng phép chia có phần dư (%) cho số trang trình bày có sẵn. Thủ thuật bằng tai này là cần thiết để bắt đầu chương trình trong một vòng tròn mới. Đây thực sự là những gì nó sẽ trông như thế nào.
Đôi khi tôi phải giải quyết các vấn đề liên quan đến frontend, mặc dù thực tế là tôi không thích nó :)
Trên thực tế, bạn có thể ước tính thái độ của tôi đối với mọi thứ liên quan đến “đẹp” từ thiết kế của trang web này do một mình tôi phát triển :)
Tuy nhiên, gần đây tôi phải đối mặt với nhu cầu triển khai một thanh trượt trong JavaScript và việc này phải được thực hiện mà không cần bất kỳ thư viện tạo sẵn nào và thậm chí không có jQuery yêu thích của mọi người.
Gọi điện nhu cầu này là kết quả phải là một tập lệnh JS, thông qua dịch vụ của bên thứ ba Tôi sẽ kết nối với trang web. Do đó, các băng chuyền tạo sẵn trong JavaScript không còn cần thiết nữa, bởi vì Để tích hợp chúng, cần phải thêm kết nối thư viện vào mã HTML của trang web thông qua thẻ script và sao chép chính các tệp đó vào máy chủ hoặc kéo chúng qua cdn, nhưng điều này lại yêu cầu chỉnh sửa mã tài nguyên.
Cách tạo thanh trượt JavaScript: phần đầuNgày nay, tôi nghĩ rằng tất cả những người rơi vào hoàn cảnh tương tự đều bắt đầu bằng việc tìm kiếm những phát triển hiện có, bởi vì... khi nhiệm vụ tạo băng chuyền JS nằm trong phạm vi công việc thì việc này phải luôn được thực hiện nhanh nhất có thể. Và trong điều kiện như vậy, không ai cho phép bạn ngồi và sáng chế ra những chiếc xe đạp của riêng mình.
Khách hàng luôn không quan tâm đến việc viết code như thế nào, kiến trúc của nó ra sao, cái chính là xem kết quả!
Kết quả là, như bạn hiểu, trước khi viết một thanh trượt bằng JavaScript mà không cần jQuery, tôi đã quyết định tìm một thanh trượt làm sẵn và sửa đổi nó cho phù hợp với nhu cầu của mình. Tại sao không có jQuery? Có, bởi vì trên tài nguyên đích, nơi tôi dự định kết nối thanh trượt của mình thông qua dịch vụ, lệnh gọi jQuery trong mã được đặt muộn hơn tập lệnh được dịch vụ kết nối. Do đó, các cấu trúc jQuery trong mã của tôi không được nhận biết.
Để làm cơ sở, tôi đã sử dụng thanh trượt hình ảnh JavaScript này - https://codepen.io/gabrieleromanato/pen/pIfoD.
Tôi quyết định dừng lại ở đó, bởi vì... Mã JS của nó được viết bằng các nguyên tắc OOP và các lớp của nó dựa trên nguyên mẫu, không dựa trên các hàm tầm thường.
Thành thật mà nói, tôi thực sự không hiểu và không nhận ra sự cường điệu hiện tại xung quanh JavaScript bằng cách sử dụng OOP, các khung và những thứ kiến trúc khác bằng ngôn ngữ mà ban đầu được dự định là ngôn ngữ kịch bản lệnh động đơn giản. Cũng giống như bản thân JS, tôi thực sự không thích nó với cú pháp vinaigrette của nó, nó cho phép viết các cấu trúc tương tự theo nhiều cách.
Nhưng thật không may, trong thế giới hiện đại Rất ít người chia sẻ quan điểm của tôi, bởi vì... Ngôn ngữ này đang phát triển với tốc độ chóng mặt và thậm chí còn đang cố gắng thu hút sự chú ý của các nhà phát triển phụ trợ bằng cách sử dụng Node.js để thay thế cho Java, PHP, C#, Ruby và các quái vật khác.
Kết quả là, để không bị bỏ rơi, bạn phải lặng lẽ tìm ra JavaScript. Và trong quá trình triển khai thanh trượt JavaScript thuần túy mà tôi đã chọn, tôi đã gặp phải một điều mà, như bạn hiểu, tôi coi thường trong ngôn ngữ nhất định. Đó là lý do tại sao tôi chọn nó, để có ít nhất lý do nào đó để làm việc và hiểu JavaScript OOP và các lớp nguyên mẫu - nếu không thì tôi sẽ không bao giờ tự nguyện chạm vào chúng trong đời :)
Dựa trên mã tôi tìm thấy, tôi cần phát triển một thanh trượt trong JS thuần túy trong một cửa sổ bật lên (thứ này còn được gọi là cửa sổ bật lên, cửa sổ bật lên, v.v.), trong đó sẽ có các nút để chuyển đổi các trang trình bày và các chỉ báo có thể nhấp của hiện tại cầu trượt. Cũng cần phải tạo một nút để đóng cửa sổ này.
Đây là những gì tôi đã kết thúc với.
Tạo thư viện JS thanh trượtĐầu tiên, tôi quyết định triển khai mọi thứ một cách khôn ngoan và tạo một thanh trượt JavaScript cho trang web dưới dạng một thư viện có thể được kết nối với trang web bằng một tập lệnh duy nhất, trong đó các thành phần thanh trượt, được chia thành các thư mục con, sẽ được gọi. Tôi quyết định gọi nó là PopupSlider.js để tôn vinh mục đích ban đầu của nó.
Mã của nó có thể được tìm thấy trên GitHub tại địa chỉ này - https://github.com/Pashaster12/popupSlider.js
Cấu trúc thư viện như sau:
Thư mục slide dành cho các hình ảnh slide. Các điều khiển chứa hình ảnh của các điều khiển băng chuyền JS (các nút để đóng thanh trượt và chuyển đổi các trang chiếu). Và trong nội dung có các thành phần tĩnh của thanh trượt JS: đánh dấu HTML và một tệp có kiểu CSS.
Chà, tệp PopupSlider.js chính là trái tim của thư viện, trong đó các hành động JavaScript của băng chuyền được viết và kết nối được thiết lập với các tệp khác. Đây là cái mà chúng ta sẽ kết nối trên trang web và nó sẽ gọi những cái khác.
Tôi quyết định bắt đầu với đánh dấu HTML băng chuyền hình ảnh JS của chúng tôi, trong trường hợp của tôi trông như thế này:
Văn bản 1 
Văn bản 2 
Văn bản 3
Để thiết kế thanh trượt trong JavaScript dưới dạng cửa sổ bật lên, tôi đã sử dụng các kiểu sau:
#slider ( lề: auto; chiều rộng: 600px !quan trọng; tràn: ẩn; ) #slider-wrapper ( chiều rộng: 9999px; chiều cao: 343px; vị trí: tương đối; chuyển tiếp: tuyến tính trái 400ms; ) .slide ( float: left; width : 600px; vị trí: tương đối; tràn: ẩn; ) .caption ( chiều rộng: 600px; chiều cao: 110px; chiều cao dòng: 1.5; cỡ chữ: 15px; độ dày phông chữ: 300; căn chỉnh văn bản: giữa; màu sắc: # 000; display:table; ) .caption-container ( display: table-cell; Vertical-align: middle; đệm: 0 20px; ) #slider-nav ( location: tuyệt đối; dưới cùng: -36px; căn chỉnh văn bản: giữa; trái: 50%; biến đổi: dịchX(-50%); ) #slider-nav a ( width: 8px; chiều cao: 8px; trang trí văn bản: không; màu: #000; hiển thị: khối nội tuyến; bán kính đường viền: 50%; lề: 0 5px; màu nền: #fafafa; ) #slider-nav a.current ( màu nền: #337ab7; ) .điều khiển ngang ( vị trí: tuyệt đối; hiển thị: khối nội tuyến; chiều rộng: 12px ; chiều cao: 20px; trên cùng: 50%; lề trên: -10px; ) #prev ( nền: url(../controls/arrow_left_inactive.png); trái: -40px; ) #prev:hover ( nền: url(../controls/arrow_left_active.png); ) #next ( nền: url(../controls/arrow_right_inactive.png); right: -40px; ) #next:hover ( nền : url(../controls/arrow_right_active.png); ) #cq-popup ( width: 600px; z-index: 23; left: calc(50%); top: calc(50%); vị trí: đã sửa !quan trọng ; lặp lại nền: không lặp lại; vị trí nền: phải; màu nền: #fff; họ phông chữ: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; biến đổi: dịch(-50%, -50%) tỉ lệ(1); ) #cq-popup .header ( display: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( chiều rộng: 500px; cỡ chữ: 22px; chiều cao dòng: 36px; ) #cq-popup-btclose ( trang trí văn bản: none; vị trí: tuyệt đối; phải: -40px; top: 0; nền: url(. ./controls/btn_delete_inactive.png); chiều cao: 16px; chiều rộng: 16px; ) #cq-popup-btclose:hover ( nền: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( vị trí : cố định; trên cùng: 0; chiều rộng: 100%; chiều cao: 100%; nền: rgba(51,51,51,0.8); chỉ số z: 22; )
Kết quả của việc áp dụng các kiểu JS này là băng chuyền trông như thế này:
Và đánh dấu HTML, và Kiểu CSS tôi đã mang vào tập tin riêng biệt PopupSlider.html và PopupSlider.css nằm trong thư mục nội dung của thư viện thanh trượt JavaScript. Tôi cố tình làm điều này để khi sử dụng mã này, người dùng có thể dễ dàng điều chỉnh đánh dấu và thiết kế mà không phải loay hoay với mã JS, nơi những gì cần viết ra sẽ phải được viết trực tiếp.
Ngoài ra, nhiều người vẫn thích giảm thiểu JS để tăng tốc độ tải trang. Vì vậy sẽ rất khó để tùy chỉnh giải pháp này trong các điều kiện quy định.
Do đó, tôi quyết định chỉ đưa các tệp được tạo sẵn vào tệp thư viện chính PopupSlider.js, tệp này dành cho nhiệm vụ của tôi có dạng sau:
Hàm Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this. el.querySelector("#prev"); this.navigate(); ), điều hướng: function () ( var self = this; for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "chặn"; khác nếu (chỉ mục == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: function (link) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Một vài nhận xét về đoạn mã trên. Nội dung của tệp PopupSlider.js là một lớp JavaScript Slider duy nhất, giống như trong PHP, chứa một hàm tạo và các phương thức lớp. Chỉ trong JS, định nghĩa của hàm tạo, không giống như PHP, là bắt buộc.
Hàm tạo được xác định bằng cách sử dụng cấu trúc sau:
Thanh trượt hàm(phần tử) ( //mã hàm tạo)
Bên trong hàm tạo, các hành động sẽ được thực hiện khi tạo đối tượng lớp phải được chỉ định.
Bản thân các phương thức lớp sẽ được đặt bên trong nguyên mẫu và sẽ có sẵn cho tất cả các phiên bản của lớp JavaScript này. Nguyên mẫu JS trong trường hợp của tôi được mô tả theo thiết kế sau:
Slider.prototype = ( //methods )
Chúng sẽ được gọi bên ngoài thân lớp như sau:
Thanh trượt Var = Thanh trượt mới(); Slider.class_method();
Và bên trong mã lớp, có sẵn phương thức sau:
This.class_method();
Điều chính là đừng quên rằng trong JavaScript, giá trị của this phụ thuộc vào ngữ cảnh của lệnh gọi, do đó, trong phần nội dung của một số phương thức cần gọi các phương thức và thuộc tính của một lớp, có một cấu trúc như vậy:
Var self = cái này; self.class_method(); // để truy cập một phương thức cao hơn một cấp so với mã của phương thức được mô tả
Có vẻ như tôi đã nói về tất cả các sắc thái của việc viết mã. Bây giờ là một vài lời về các phương thức của lớp JavaScript của chúng tôi, chứa các mô tả về các hành động JS của băng chuyền hình ảnh.
tảiStatic()
Phương thức đầu tiên được gọi khi tạo một thể hiện của một lớp trong hàm tạo. Chịu trách nhiệm thêm đánh dấu thanh trượt và tệp có kiểu vào mã HTML của trang web.
Đầu tiên, một thẻ liên kết mới được tạo trong bộ nhớ với sử dụng JavaScript hàm document.createElement() và nó được gán giá trị của tất cả các thuộc tính cần thiết, bao gồm đường dẫn đến tệp CSS với các kiểu thanh trượt JS. Và cuối cùng, nó được thêm vào trang HTML bằng cách sử dụng Phương thức JavaScript appendChild() vào cuối phần đầu, nơi cần có các kiểu.
Tiếp theo, chúng tôi thực hiện tương tự đối với tệp có đánh dấu HTML của thanh trượt bằng JavaScript thuần túy. Chỉ có một sắc thái nhỏ ở đây: bạn không thể chỉ đưa một tệp HTML vào trong cùng một tệp, như chúng tôi đã làm với tệp CSS. Đối với điều này có thư viện đặc biệt, ví dụ: để kết nối HTML với HTML, lib từ w3.org thật tuyệt vời - https://www.w3schools.com/howto/howto_html_include.asp
Nhưng sau đó, nó sẽ phải được đưa vào thư viện thanh trượt hoặc yêu cầu người dùng tự cài đặt nó. Nhưng tất cả điều này là chưa tối ưu, bởi vì... yêu cầu chuyển động cơ thể nhiều và làm chậm tốc độ tải trang do có thêm tập lệnh.
Kết quả là tôi quyết định nhận nội dung tập tin HTML bên trong mã JavaScript và tải nó vào một mã mới phần tử div, được tạo trong bộ nhớ, như tôi đã làm trước đó để kết nối tập tin CSS trong JavaScript. Phần tử được tạo được kết nối với phần cuối của phần nội dung HTML mã trang của trang web.
Nếu bạn muốn chèn một div có đánh dấu thanh trượt không chỉ ở cuối nội dung mà còn trong một vùng chứa cụ thể, bạn có thể sử dụng mã sau để thay thế:
Var div = document.createElement("div"); div.innerHTML = thanh trượtHTML; document.body.appendChild(div);
Nhập thông tin sau, chỉ định mã định danh mong muốn của vùng chứa mục tiêu (trong trường hợp của tôi, thanh trượt HTML JS sẽ được đặt trong phần tử có id PopupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = SliderHTML;
Phương thức được gọi trong hàm tạo sau LoadStatic(), là cần thiết để khởi tạo các thuộc tính lớp tương ứng với các thuộc tính chính phần tử HTML, mà chúng ta sẽ truy cập trong đoạn mã sau.
Cuối cùng, phương thức Navigation() được gọi.
điều hướng()
Trong phương pháp này, các hành động xảy ra khi bạn nhấp vào nút chuyển đổi trang trình bày và các thành phần điều hướng nằm bên dưới thanh trượt được biểu thị dưới dạng vòng tròn.
Để thuận tiện, tôi đã chuyển mã JavaScript để thay đổi các slide thành một phương thức slide() riêng biệt, nhưng trong phương thức này tôi chỉ đính kèm nó vào sự kiện click cho mỗi nút tròn trong vòng lặp.
Khi bạn nhấp vào nút “trang trình bày trước” / “trang trình bày tiếp theo”, như bạn có thể thấy, tôi quyết định chỉ mô phỏng một nhấp chuột vào vòng tròn tương ứng, xác định vòng tròn mong muốn so với vòng tròn hiện tại, có lớp CSS hiện tại.
trượt(phần tử)
Phương pháp “chịu trách nhiệm về sự kỳ diệu” của chính băng chuyền JavaScript, chứa mã thay đổi vị trí của các trang trình bày. Lúc đầu, phương thức setCurrentLink() được gọi, chúng ta sẽ nói về phương thức này sau.
Đối tượng nút điều hướng thanh trượt JS ở dạng vòng tròn được truyền cho nó dưới dạng tham số đầu vào.
Bản thân công tắc trượt hoạt động như thế này:
Ở cuối phương pháp, hoạt động của các nút “trang trình bày trước”/”trang trình bày tiếp theo”, được thiết kế tương ứng dưới dạng mũi tên trái/phải, sẽ được mô tả. Nếu trang chiếu hiện tại là trang đầu tiên trong toàn bộ danh sách thì nút đi tới trang chiếu trước đó sẽ bị ẩn. Nếu sau này thì bỏ nút đó để chuyển sang slide tiếp theo.
setCurrentLink(liên kết)
Phương thức này của lớp thanh trượt JavaScript của chúng tôi có nhiệm vụ làm nổi bật nút tròn điều hướng tương ứng với phần tử hiện tại. Những thứ kia. nếu chúng ta chọn slide thứ hai, nút thứ hai sẽ được đánh dấu.
Đối tượng của nút cần được chọn làm đối tượng hiện tại sẽ được truyền dưới dạng tham số đầu vào cho hàm.
Logic để làm nổi bật phần tử hiện tại rất đơn giản:
Phương thức cuối cùng của lớp, xác định hành động khi nhấp vào nút đóng của thanh trượt ở dạng chữ thập. Trên thực tế, đây là mã dễ hiểu nhất trong số tất cả các mã có trong lớp thanh trượt JS.
Khi bạn nhấp vào nút đóng, được truy cập bằng mã định danh của nó, phần tử thanh trượt và phần tử xác định nó sẽ bị xóa khỏi trang. nền trong suốt. Ngược lại, chúng cũng được thu thập bằng các mã định danh duy nhất.
Bản thân phương thức này được gọi bên trong Navigator() được mô tả trước đó, chứa tất cả các kịch bản hành động diễn ra trên thanh trượt JavaScript của chúng tôi.
Nhân tiện, nếu bạn muốn đóng thanh trượt khi nhấp vào bên ngoài thanh trượt, thì chỉ cần thêm đoạn mã sau vào phương thức này:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Trình chiếu JavaScript dựa trên thư viện đã phát triểnĐôi khi trong thực tế, bạn có thể cần tạo một băng chuyền cuộn JS, thường được gọi là trình chiếu. Trong trường hợp của tôi, điều này là không bắt buộc, nhưng tôi vẫn quyết định tạo một cái dựa trên mã thư viện cuối cùng để phòng trường hợp nó có thể hữu ích.
Trong thực tế, Triển khai JavaScript Trình chiếu này khác với thanh trượt thông thường một chút. Sự khác biệt duy nhất là trong một trình chiếu, các trang trình bày sẽ tự động chuyển đổi theo một khoảng thời gian nhất định, trong khi đối với băng chuyền JS thông thường, chúng sẽ thay đổi theo cách thủ công bằng cách sử dụng các phần tử điều hướng.
SlideShow: function (hết thời gian) ( var slideCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribution ("data-slide"); var slideId = ParseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); ), timeout); )
Tôi nghĩ rõ ràng chuyện gì đang xảy ra ở đây. Để tạo phương pháp này Tôi đã sao chép mã từ sự kiện nhấp chuột trên các nút chuyển đổi trượt thủ công và đặt nó vào trong cuộc gọi Hàm JavaScript setInterval(), thực hiện hành động được chỉ định sau một khoảng thời gian xác định.
Tập lệnh hành động được truyền dưới dạng đối số đầu tiên dưới dạng hàm ẩn danh và khoảng thời gian được truyền dưới dạng khoảng thời gian thứ hai, mà tôi quyết định đặt làm biến có giá trị được truyền khi slideShow() được gọi.
Việc sửa đổi duy nhất đối với mã bên trong setInterval() được yêu cầu là xác định số lượng trang trình bày và so sánh chỉ mục của trang trình bày hiện tại với nó để thực hiện chuyển đổi tự động theo chu kỳ.
Vâng, và để mã này kiếm được thì chính phương thức đó phải được gọi. Tôi quyết định thực hiện tất cả những điều này trong cùng một điều hướng(), đây chính xác là một tập hợp của tất cả các loại tập lệnh. Tôi đã đặt cuộc gọi ở cuối, chuyển làm đối số giá trị của khoảng thời gian để tự động thay đổi các trang chiếu trong trình chiếu JS của chúng tôi (Tôi đã chọn 2000 mili giây hoặc 2 giây, bạn có thể thay đổi số này nếu cần):
Self.slideShow(2000);
Sau lần kiểm tra đó Công việc JavaScript thanh trượt mà không quên dọn dẹp trình duyệt của bạn.
Về lý thuyết, mọi thứ sẽ hoạt động. Nếu không, hãy nghiên cứu các lỗi trong bảng điều khiển trình duyệt và chia sẻ chúng trong phần bình luận.
Kết quả là chúng tôi có một trình chiếu JS trong đó các trang trình bày tự động chuyển đổi và theo hình tròn, tức là. khi đến slide cuối cùng, chương trình sẽ chuyển sang chu kỳ mới và màn hình bắt đầu lại từ phần tử đầu tiên.
Trong khi làm việc với nhiều thư viện JS khác nhau cho băng chuyền hình ảnh và bài đánh giá, tôi nhận thấy rằng thực hành này các nhà phát triển tích cực sử dụng, nhưng có một số bổ sung. Trong tất cả các giải pháp tôi đã thấy, trình chiếu tự động bị gián đoạn nếu người dùng thực hiện chuyển đổi thủ công. Vì vậy, tôi quyết định làm điều tương tự trong thư viện của mình.
Để làm gián đoạn quá trình hiển thị tự động của các trang trình bày băng chuyền JavaScript, tôi quyết định sử dụng hàm JS tiêu chuẩn clearInterval(), mà tôi chuyển vào đó làm đối số mã định danh của khoảng thời gian được hàm setInterval() trả về khi nó được đặt.
Kết quả là tôi nhận được đoạn mã sau và tôi quyết định không viết dưới dạng một phương thức riêng biệt:
ClearInterval(self.slideCycle);
Và đặt nó ở những nơi mô tả hành động khi nhấp vào các thành phần điều hướng khác nhau, tức là. trong những điều sau đây:
Link.addEventListener ("nhấp chuột", hàm (e) (...)); self.prevBtn.addEventListener ("nhấp chuột", hàm (e) (...)); self.nextBtn.addEventListener ("nhấp chuột", hàm (e) (...));
Tốt hơn là nên gọi clearInterval() gần hơn với chính sự kiện nhấp chuột, điều chính là ở trước sự kiện đó chứ không phải ở sau sự kiện đó.
Tích hợp thanh trượt JavaScript trên trang webVì vậy, thanh trượt trong JS thuần túy của chúng tôi đã sẵn sàng. Bây giờ tất cả những gì còn lại là kết nối nó với trang web.
Để làm được điều này bạn phải thực hiện tuần tự bước tiếp theo, đây là những hành động tiêu chuẩn khi tích hợp bất kỳ thư viện JavaScript của bên thứ ba nào nói chung.
Bước 1 . Chúng tôi sao chép các tập tin thư viện vào trang web của chúng tôi trong một thư mục riêng.
Bước 2. Thêm đoạn mã sau vào HTML của các trang cần hiển thị thanh trượt, đặt nó trước thẻ nội dung đóng:
Bước 3. Chúng tôi đặt đoạn mã sau để gọi băng chuyền JS trong bất kỳ tệp JavaScript hiện có nào, được đưa vào trang sau khi kết nối chính thanh trượt:
Var aSlider = Thanh trượt mới("#slider");
Như bạn có thể thấy, mã này về cơ bản là tạo một đối tượng của lớp Slider, được chứa trong PopupSlider.js. Đó là lý do tại sao nó chỉ được gọi sau khi kết nối chính tệp lớp đó với trang.
Thêm trang trình bày mới vào băng chuyền JavaScriptMọi thứ ở đây rất đơn giản. Vì slide của chúng ta được lấy từ một thư mục riêng của thư viện slide nên khi thêm hình ảnh mới bạn chỉ cần thả chúng vào đó tập tin cần thiết, trước đây đã cho chúng cùng kích thước với những cái khác.
Và sau đó trong mã của tệp assets/popupSlider.html thêm khối mới vào vùng chứa có id Slider-wrapper :
Chữ
Về nguyên tắc, bạn có thể chỉ cần sao chép một cái tương tự hiện có và thay đổi đường dẫn đến tệp hình ảnh và văn bản chữ ký (nếu cần).
Bạn cũng sẽ cần thêm một thành phần điều hướng mới ở dạng hình tròn, bởi vì... TRÊN khoảnh khắc này việc bổ sung tự động của nó vẫn chưa được triển khai. Để thực hiện việc này, bạn sẽ cần thêm mã sau vào vùng chứa có id điều hướng thanh trượt, viết mã đó ở cuối:
Giá trị của thuộc tính data-slide phải lớn hơn giá trị lớn nhất của các phần tử khác. Chỉ cần tăng dòng điện tối đa thêm một lần là đủ.
Đóng gói băng chuyền JS thành một tập lệnh duy nhấtThế là xong, thanh trượt JavaScript đã sẵn sàng và được kết nối. Cá nhân tôi khuyên bạn nên sử dụng tùy chọn này trong thực tế, nếu bạn cần nó :)
Nhân tiện, để tăng tốc hoạt động của nó, bạn có thể nén thêm các thành phần tĩnh: CSS, HTML và Tệp JavaScript. Tôi đã không làm điều này và cung cấp cho bạn mã rút gọn, bởi vì hiện nay có rất nhiều hệ thống xây dựng giao diện người dùng: Gulp, Grunt, Webpack và các hệ thống khác. Và mỗi người trong số họ có thuật toán riêng để nén và kết nối các tập tin.
Ngoài ra, kết quả rút gọn có thể hoạt động khác nhau trên các hệ điều hành khác nhau. Nói chung là có nhiều lý do.
Và bản thân mã nguồn, tôi nghĩ, không nặng đến mức họ cần thủ tục này. Nhưng nếu bạn cần chúng, thì hãy tự mình định cấu hình thu nhỏ, có tính đến hệ điều hành và bộ sưu tập của bạn.
Như tôi đã viết ngay từ đầu, để giải quyết nhiệm vụ đặt ra ban đầu cho mình, tôi cần lấy một tệp JS duy nhất để sử dụng đúng thanh trượt của mình thông qua dịch vụ của bên thứ ba trên trang web. Vì lý do này, nói đúng ra, tôi không sử dụng các thư viện làm sẵn của bên thứ ba.
Sau đó, tùy chọn kịch bản đơn Băng chuyền JavaScript sẽ có ích cho bạn, bởi vì... tất cả nội dung sẽ được chứa trực tiếp trong đó, bao gồm cả mã HTML/CSS, trong trường hợp thư viện được lưu trữ trong các tệp riêng biệt.
Kịch bản trong trường hợp của tôi bao gồm hai phần. Phần đầu tiên chứa nội dung của tệp PopupSlider.js mà tôi sẽ không trình bày lần thứ hai. Hãy tự chèn nó vào, loại bỏ mô tả của phương thức LoadStatic() và lệnh gọi của nó khỏi mã lớp, bởi vì chúng ta sẽ không cần chúng.
Phần thứ hai tương tự Tập lệnh JavaScript Thanh trượt cho trang web là trình xử lý sự kiện DOMContentLoaded, xảy ra khi nội dung trang được tải.
Ở đó, chúng ta sẽ thêm mã JS băng chuyền vào trang HTML/CSS và tạo một đối tượng của lớp Slider, tương đương với việc kích hoạt chính thanh trượt đó.
Theo sơ đồ mã trông như thế này:
/* nội dung của PopupSlider.js mà không mô tả phương thức LoadStatic() và lệnh gọi của nó */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css code*/ \ /* html code * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Vì trong trường hợp của tôi, tùy chọn tải tệp lên máy chủ thường bị đóng nên tôi phải tải tệp hình ảnh của các thành phần lên Điều khiển JavaScript băng chuyền lên đám mây và thay vì đường dẫn đến chúng trong mã HTML và CSS, hãy viết các liên kết được tạo khi lưu.
Nếu bạn không gặp khó khăn như vậy thì bạn không phải thay đổi bất cứ điều gì, nhưng đừng quên sao chép các thư mục thư viện slide và điều khiển vào máy chủ và chỉ định đường dẫn chính xác đến chúng.
Thanh trượt JS tùy chỉnh - triển vọng phát triểnThành thật mà nói, tôi không có ý định tham gia vào việc hỗ trợ và phát triển có mục tiêu giải pháp mà tôi đã tạo ra :) Hiện tại, có rất nhiều thanh trượt tương tự và một chiếc xe đẩy nhỏ, không giống như của tôi, có lịch sử riêng, đã được kiểm tra kỹ lưỡng và được hỗ trợ bởi một cộng đồng lớn người dùng và nhà phát triển.
Bằng cách nào đó, không có gì thú vị đối với tôi khi bắt đầu toàn bộ hành trình này từ đầu và tạo ra một chiếc xe đạp khác, và tôi thực sự không có thời gian cho việc đó. Nhưng đã cho JavaScript thanh trượt là cơ hội tuyệt vời để thực hành phát triển bằng cách cấu trúc lại mã của nó và triển khai mã mới tính năng thú vị, có thể chưa tồn tại.
Vì vậy, nếu bạn, giống như tôi, cần cơ sở mãđể thử nghiệm và bạn có ít nhất một chút thời gian rảnh - sao chép mã của thanh trượt JavaScript mà tôi đã mô tả hoặc tham gia cùng những người đóng góp trên GitHub. Kho lưu trữ mở và tôi đã cung cấp liên kết tới nó ở đầu bài viết.
Nếu bạn muốn cải thiện kỹ năng giao diện người dùng của mình trong tác phẩm của tôi, tôi thậm chí có thể cung cấp cho bạn một danh sách nhỏ các chỉnh sửa và cải tiến mà mã cần và có thể khiến bạn quan tâm về mặt triển khai chúng:
Tất nhiên, danh sách các chỉnh sửa tôi đưa ra chưa phải là cuối cùng và có thể được bổ sung. Viết về những đề xuất, suy nghĩ và mong muốn của bạn trong phần bình luận bên dưới bài viết và chia sẻ với bạn bè của bạn qua mạng xã hội để họ cũng cùng tham gia phát triển.
Tôi yêu cầu bạn không đánh giá mã của tôi một cách nghiêm khắc, bởi vì, như tôi đã nói, tôi không coi mình là chuyên gia Frontend và không phải vậy. Tôi cũng sẵn sàng đón nhận mọi nhận xét của bạn về phong cách viết mã và hy vọng rằng tôi có thể học được điều gì đó từ bạn và bạn từ tôi, tức là. thực hiện mục đích chính là phát triển và hỗ trợ các sản phẩm OpenSource.
Tham gia cộng đồng dự án, đăng ký nhận thông tin cập nhật và thậm chí bạn có thể giúp tôi về mặt tài chính bằng cách sử dụng biểu mẫu ngay bên dưới bài viết, nếu tôi có thể giúp bạn điều gì đó hoặc bạn thích những gì tôi làm :)
Đó là tất cả những gì tôi muốn nói! Mọi điều tốt đẹp nhất! 🙂
tái bút : nếu bạn cần một trang web hoặc cần thay đổi trang web hiện có, nhưng không có thời gian hoặc mong muốn cho việc này, tôi có thể cung cấp dịch vụ của mình.
Hơn 5 năm kinh nghiệm phát triển website chuyên nghiệp. Làm việc với PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular và các công nghệ phát triển web khác.
Kinh nghiệm phát triển dự án nhiều cấp độ khác nhau: trang đích, trang web công ty, cửa hàng trực tuyến, CRM, cổng thông tin. Bao gồm hỗ trợ và phát triển các dự án HighLoad. Gửi đơn đăng ký của bạn qua email [email được bảo vệ].
1. Băng chuyền jQuery “clickCarousel”
Chặn với các thông báo tin tức cuộn. Sử dụng mũi tên trái/phải để di chuyển qua các khối. Trong kho lưu trữ có một băng chuyền làm hai tạo kiểu: sáng và tối.
1. Băng chuyền jQuery, plugin “carouFredSel”
Một băng chuyền hình ảnh gọn gàng, mới mẻ trong jQuery.
4. plugin jQuery: băng chuyền "Elastislide"
Thanh trượt nội dung tuyệt vời ở dạng băng chuyền hình ảnh với sử dụng jQuery. Trang demo mô tả cách đính kèm băng chuyền này vào trang web của bạn.
Plugin "Slider Kit", một băng chuyền nhẹ với những cách khác cuộn.
7. băng chuyền javascript
Điều hướng ban đầu giữa các hình thu nhỏ của hình ảnh. Để xem hiệu ứng ở phía bên phải của trang demo, hãy nhấp vào nút Lên và Xuống. Giải pháp jQuery này cũng cung cấp hiệu ứng di chuột trên hình thu nhỏ và cuộn bằng con lăn chuột.
9. Băng chuyền dễ dàng 10. Băng chuyền được làm từ các khối “Easy Paginate”
Plugin jQuery "Phân trang dễ dàng". Mỗi khối hình chữ nhật đại diện cho một mục danh sách li thông thường và nếu có nhiều hơn ba mục thì để xem tất cả chúng, bạn cần sử dụng điều hướng giống thanh trượt (sử dụng mũi tên tiến và lùi và sử dụng các nút điều hướng ở phía dưới).
11. Công cụ quay vòng Ticker dọc
Công cụ quay dọc trên jQuery: tự động cuộn nội dung trên trang. Các nút điều hướng được cung cấp cũng như khả năng dừng xoay và bắt đầu lại. Khi bạn di con trỏ chuột, chuyển động sẽ dừng lại. Ở cấp độ đánh dấu HTML, các khối cuộn được thể hiện bằng các mục danh sách li thông thường.
12. css css vùng cuộn
giải pháp javascript "TinyScroller" để tạo vùng cuộn được đặt trong vùng chứa DIV.
13. Plugin jQuery “Smooth Div Scroll”
Plugin để triển khai cuộn ngang nội dung trong một lĩnh vực cụ thể. Khi bạn di chuột qua cạnh trái hoặc phải của khu vực, quá trình cuộn sẽ bắt đầu.
Việc điều hướng giữa các slide nội dung có thể được thực hiện bằng cách sử dụng mũi tên hoặc bằng cách nhấp vào hình thu nhỏ. Ở phía dưới có nút “Hiển thị” cho phép bạn ẩn/hiện hình thu nhỏ hoặc mô tả đầy đủ về trang chiếu.
15. Công cụ quay vòng nội dung “Băng chuyền nội dung tròn”
Một khối có thanh cuộn xuất hiện khi bạn di con trỏ. Bạn có thể cuộn nội dung bằng thanh cuộn hoặc con lăn chuột.
Giải pháp jQuery này được lấy cảm hứng từ hiệu ứng tương tự trên trang web của Apple. Các nhà phát triển của tập đoàn này luôn tìm thấy giải pháp thú vị, điều này đã truyền cảm hứng cho các quản trị viên web từ khắp nơi trên thế giới. Để trình diễn plugin, hãy chọn một danh mục từ danh sách.
19. Thanh trượt tuyệt vời
Thanh trượt được tạo tự động. Dữ liệu có tên sản phẩm, mô tả, liên kết và địa chỉ hình ảnh được lấy từ tệp Slider.db.txt. Công nghệ sử dụng: CSS, PHP, jQuery.
20. Xoay khối bằng jQuery
Để xem hiệu ứng xoay khối, hãy nhấp vào một trong các hình chữ nhật nhỏ trên trang demo
Ví dụ: một plugin cuộn nội dung có thể được sử dụng để hiển thị tin tức mới nhất hoặc hiển thị tờ rơi Twitter trên một trang web.
22. Khối động “Đánh giá của khách hàng”
Tự động xoay nội dung khối. Công nghệ sử dụng: PHP, XML, CSS, jQuery.
Plugin này chuyển đổi các mục danh sách (ul li) thành các phần tử băng chuyền jQuery.
26. băng chuyền javascript “ImageFlow”
Thật dễ dàng để cuộn qua các hình ảnh bằng con lăn chuột.
27. Di chuyển nội dung
Một khối nhỏ gọn chứa thông báo về các tài liệu hoặc tin tức mới nhất trên trang web. Cột bên trái hiển thị danh sách được phân trang gồm các thông báo ngắn về tin tức mới nhất. Khi bạn chọn một trong số chúng, nhiều cái sẽ được hiển thị ở cột bên phải miêu tả cụ thể và một liên kết để đọc toàn vănấn phẩm. Được triển khai bằng jQuery.
Hình ảnh có chứa link được cuộn, khi bạn di chuột thì quá trình cuộn dừng lại và thanh điều hướng xuất hiện. Khi bạn di chuột qua ảnh, tên của ảnh cũng được hiển thị giữa các nút điều khiển. Nhìn trên trang rất đẹp
33. Cuộn nội dung, plugin Mootools “Scrollbar”
Việc cuộn được thực hiện bằng cả thanh cuộn và con lăn chuột.
Một ngày nọ, bạn bè của tôi quyết định dành cho tôi một bất ngờ thú vị. Bản thân sự ngạc nhiên đó rất đơn giản; nó đòi hỏi một chiếc áo phông rất bình thường không có bất kỳ kiểu dáng nào.
Và sau đó họ gặp phải một vấn đề - tất cả áo phông trong cửa hàng đều có hình ảnh trên đó. Họ không thể tìm thấy chiếc áo phông đơn giản nhất mà không có hình ảnh. Tôi nghĩ bạn đã gặp phải vấn đề tương tự khi không thể tìm ra điều đơn giản nhất.
Và câu chuyện tương tự với băng chuyền; hầu hết tất cả các băng chuyền đều đã có thiết kế. Và bạn hầu như luôn cần một băng chuyền sạch sẽ, sau đó bạn có thể thiết kế theo ý định của nhà thiết kế.
Do đó, để có thể ngay lập tức thích thú khi làm việc với băng chuyền và thực hiện chúng một cách nhanh chóng, tôi khuyên bạn nên sử dụng plugin sau.
Plugin jQuery cho băng chuyền rõ ràng và mạnh mẽĐiều thú vị về plugin này là nó không có thiết kế và dễ làm việc hơn nhiều so với các plugin đẹp mắt khác.
Nó có thể được trang trí theo bất kỳ cách nào bạn thích.
Và đây là plugin này: Owl Carousel.
Cài đặt plugin1. Kết nối jQuery, nếu nó chưa được kết nối, ví dụ như thế này
2. Sao chép các tập tin plugin vào thư mục trang web
- Giải nén
- Sao chép thư mục owl-carousel vào trang web
3. Kết nối các tệp này với trang web:
4. Thêm mã vào trang
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. Khởi chạy plugin
$(document).ready(function())( // Tìm khối băng chuyền var carousel = $("#carousel"); // Khởi chạy plugin băng chuyền carousel.owlCarousel(); ));
6. Chúng tôi sắp xếp
/* Khối chính */ .owl-wrapper-outer ( border: 1px Solid #777; border-radius: 5px; tràn: ẩn; nền: trắng; ) /* 1 hình vuông băng chuyền */ .carousel-element ( đệm: 30px ; căn chỉnh văn bản: giữa; cỡ chữ: 300%; viền phải: 1px liền khối #777; )
Nút quay lại và chuyển tiếpTrong ví dụ này, tôi sẽ không chỉ ra phương pháp nhanh nhất mà là phương pháp phổ biến nhất.
1. Tự thêm các nút
2. Gắn nút vào plugin băng chuyền
Sau khi khởi chạy plugin, hãy thêm mã
// Quay lại // Khi bạn nhấp vào "Quay lại" $("#js-prev").click(function () ( // Bắt đầu tua lại carousel.trigger("owl.prev"); return false; )); // Chuyển tiếp // Khi bạn nhấp vào "Chuyển tiếp" $("#js-next").click(function () ( // Bắt đầu tua lại về bên phải carousel.trigger("owl.next"); return false; ) );
Bây giờ, khi bạn nhấp vào “Quay lại” và “Chuyển tiếp”, tua lại sẽ được kích hoạt.
Điểm đánh dấuĐây là những điểm cho thấy chúng ta đang ở đâu.
Chúng có thể được kích hoạt khi chạy plugin bằng cách thêm tham số sau
// Khởi chạy plugin băng chuyền carousel.owlCarousel(( // Các điểm trong phân trang băng chuyền: true ));
/* Chặn bằng dấu chấm */ .owl-pagination ( text-align: center; /* Căn chỉnh các dấu chấm ở giữa */ ) /* 1 Point */ .owl-page ( width: 10px; Height: 10px; border: 1px đặc #777; display: inline-block; nền: trắng; lề: 10px; bán kính đường viền: 5px; ) /* Điểm hoạt động */ .owl-page.active ( nền: #777; )
Chỉ hiển thị 1 khốiĐiều này khá thường xuyên cần thiết, vì điều này chúng tôi thêm tham số sau
// Khởi chạy plugin băng chuyền carousel.owlCarousel(( singleItem: true, // Chỉ hiển thị 1 khối ở độ rộng đầy đủ ));
Số khối khác nhau trên các thiết bị khác nhauMột tính năng rất hữu ích cho phép bạn tạo băng chuyền thích ứng cho thiết bị di động.
// Khởi chạy plugin carousel carousel.owlCarousel(( // Số khối được hiển thị // tùy theo thiết bị (chiều rộng màn hình) // Số khối trên các mục màn hình lớn: 10, // 5 khối trên máy tính (màn hình từ 1400px đến 901px) itemsDesktop : , // 3 khối trên máy tính nhỏ (màn hình từ 900px đến 601px) itemDesktopSmall: , // 2 thành phần trên máy tính bảng (màn hình từ 600 đến 480 pixel) itemTablet: , // Cài đặt điện thoại bị tắt, trong trường hợp này chúng sẽ // được sử dụng cài đặt máy tính bảng itemsMobile: false ));
Đó là loại ngạc nhiên gì vậy?Bạn bè đến dự tiệc sinh nhật của tôi, họ mỉm cười vui vẻ, niềm vui ngập tràn. Họ long trọng tặng tôi một món quà.
Tôi mở nó ra và nhìn vào chiếc áo phông. Tôi đang mở nó ra. Chết tiệt, thật ngu ngốc. Tôi nhìn thấy 3 bức ảnh của tôi trên chiếc áo phông này. Tôi mặc áo phông vào và mọi người bắt đầu cười, nó trở nên ngu ngốc và buồn cười.
