Nhiều người trên trang web của họ muốn xem các thanh trượt - đây là các khối hiển thị một phần tử nội dung trên màn hình và sau một khoảng thời gian nhất định sẽ thay đổi nội dung này thành nội dung khác. Đương nhiên, mọi nhà phát triển web đều có thể tạo một thanh trượt bằng HTML, CSS và JavaScript một cách độc lập, nhưng điều này không phải lúc nào cũng có ý nghĩa. Bạn sẽ mất khá nhiều thời gian, mặc dù thực tế là có khá nhiều giải pháp sẵn có trên Internet giúp cuộc sống của bạn dễ dàng hơn nhiều và làm cho trang web của bạn hấp dẫn hơn nhiều. Bài viết này sẽ tập trung vào một trong những giải pháp được gọi là Owl Carousel. Việc thiết lập thanh trượt này cực kỳ đơn giản, vì vậy ngay cả người mới bắt đầu cũng có thể xử lý nó. Bây giờ bạn sẽ tìm hiểu thanh trượt này là gì, cũng như các chi tiết quan trọng khác. Thiết lập Owl Carousel là một quá trình từng bước, vì vậy bạn chỉ nên nghiên cứu tài liệu này theo thứ tự.
Đó là gì và tại sao bạn nên chọn thanh trượt cụ thể này?
Owl Carousel, cấu hình sẽ được thảo luận trong bài viết này, là một plugin rất hiệu quả giúp thêm một thanh trượt đẹp và tiện lợi vào trang của bạn, điều này sẽ tạo điều kiện thuận lợi cho công việc của bạn trên trang web,tiết kiệm nhiều thời gian, công sức và tiền bạc. Ưu điểm của plugin cụ thể này là gì, vì có khá nhiều thanh trượt trên Web? Thực tế là thanh trượt này cung cấp cho bạn hàng tá tùy chọn tùy chỉnh, cho phép bạn làm cho trang của mình trở nên độc đáo và không thể bắt chước. Nó là một plugin đáp ứng sẽ hoạt động trên tất cả các phiên bản trình duyệt và có thể dễ dàng kết nối với WordPress và các CMS phổ biến khác. Nói chung, thanh trượt này có rất nhiều ưu điểm, vì vậy bạn chắc chắn nên đưa ra lựa chọn có lợi cho nó. Tuy nhiên, trước khi bạn bắt đầu thiết lập Owl Carousel, bạn vẫn cần tải plugin này.
Tải xuống
Không thể cài đặt Owl Carousel 2 nếu bạn chưa tải nó về máy tính và vì đây là hướng dẫn từng bước nên bạn phải bắt đầu lại từ đầu. Vì vậy, chương trình có thể được tải xuống bằng trình quản lý gói, nhưng đây là các công cụ dành cho nhà phát triển nâng cao, vì vậy ở đây chúng tôi sẽ cho bạn biết cách tải plugin này theo cách chuẩn. Bạn cần truy cập trang web chính thức của plugin và tải xuống phiên bản mới nhất của plugin. Sau đó, tất cả các tệp đã tải xuống phải được chuyển đến thư mục của trang web của bạn, đã chuẩn bị sẵn một thư mục thuận tiện, được đặt tên giống với chính plugin. Lưu ý rằng plugin này được đóng gói với jQuery, vì vậy bạn cũng cần phải có sẵn thư viện đó. Chà, khi bạn đã tải xuống plugin này, bạn sẽ cần thực hiện bước tiếp theo là thiết lập thanh trượt Owl Carousel 2.
CSS
BCác cài đặt Owl Carousel 1.3 gần như vẫn giống như trong phiên bản 2 mới hơn, chỉ có các tính năng mới được thêm vào. Tuy nhiên, thông tin cơ bản sẽ giống nhau, bắt đầu bằng việc thêm CSS vào tài liệu của bạn. Vì vậy, bước đầu tiên là thêm dòng. Cô ấy cho bạn cái gì? Đây là một chuỗi tải các kiểu cần thiết vào trang web để hiển thị thanh trượt. Đây là nơi bạn có thể hoàn thành bằng cách tự mình xử lý hình ảnh. Tuy nhiên, có một giải pháp tiện lợi và nhanh chóng hơn. Bạn cũng có thể thêm một dòng cũng tải chủ đề mặc định của thanh trượt, làm cho nó sẵn sàng sử dụng ngay lập tức. Bạn có thể chỉnh sửa một số kiểu để làm cho thanh trượt trở nên độc đáo và khác biệt hơn, đồng thời phù hợp hơn với nội dung của bạn. Đương nhiên, cài đặt Owl Carousel bằng tiếng Nga sẽ rất thuận tiện, nhưng mọi người tạo trang web nên hiểu rằng họ không thể làm được nếu không có kiến thức về tiếng Anh.
Kết nối JavaSpript
Tất nhiên, thanh trượt sẽ không hoạt động nếu không có JS, vì vậy bạn cũng nên chú ý đưa vào tệp thích hợp chứa mã cần thiết. Để làm điều này, bạn cần phải chèn một dòng mã từ tài liệu, tuy nhiên, phải đáp ứng một điều kiện. Mọi người đều biết rằng JS là một ngôn ngữ lập trình thực thi tất cả các lệnh theo thứ tự, vì vậy trong trường hợp này, bạn nên thêm dòng mã này sau dòng thêm thư viện jQuery vào tài liệu của bạn. Thông tin thêm về JS trong trường hợp của thanh trượt này, bạn không phải làm gìcần.
mã hóa HTML
Chà, bạn đã kết nối thanh trượt, giờ là lúc thiết kế và tùy chỉnh nó. Trước hết, bạn cần viết mã HTML để thanh trượt xuất hiện trên trang của bạn. Để làm điều này, bạn cần tạo một vùng chứa sẽ chứa các trang trình bày. Điều này có thể được thực hiện bằng cách sử dụng thẻ div, thẻ này cần được gán cho lớp owl-carousel. Chính lớp này đảm bảo rằng tất cả các kiểu liên quan đến thanh trượt sẽ được kích hoạt. Bạn cũng có thể viết một lớp khác - chủ đề cú. Sẽ rất hữu ích nếu bạn quyết định sử dụng thiết kế mặc định hoặc lấy phiên bản tiêu chuẩn của thanh trượt làm cơ sở cho các công việc tiếp theo.
Sau đó, bạn cần thêm từng trang chiếu vào một vùng chứa riêng biệt với thẻ div. Tất nhiên, bạn có thể sử dụng các thẻ khác, nhưng thẻ này là tốt nhất cho thanh trượt.
Gọi plugin
Và điều cuối cùng bạn cần làm để có sẵn thanh trượt trên trang web của mình là sử dụng khối mã này:
$ (tài liệu).ready (function () {
$ (". Owl-carousel"). OwlCarousel ();
});
Nó đảm bảo rằng thanh trượt bắt đầu hoạt động, tức là cuộn qua nội dung, khi trang của bạn tải. Với cùng một mã, bạn có thể kết nối Owl Carousel với WordPress. Các cài đặt của plugin này rất nhiều và đa dạng, và bây giờ bạn sẽ tìm hiểu về những điểm chính nhất.
Đặt giao diện và chức năng của thanh trượt
Vậy bạn có thể sử dụng lệnh nào để tùy chỉnh thanh trượt của mình? Trước hết, bạn cần nhớ lệnh items, vì với nó, bạn có thể đặt một số trang trình bày cụ thể trong thanh trượt của mình. Lệnh lặp sẽ cho phép bạn chọn lặp lại thanh trượt hoặc dừng cuộn ở phần tử cuối cùng. Ngoài ra còn có lệnh Kéo, có một số tùy chọn, chẳng hạn như chuột và chạm. Trong trường hợp đầu tiên, bạn có thể thực hiện nó để có thể vuốt các phần tử của thanh trượt bằng cách nhấn giữ chuột và trong trường hợp thứ hai, với sự trợ giúp của một cú chạm (lệnh này phù hợp với thiết bị di động). Một lệnh quan trọng khác là nav, cho phép hiển thị các mũi tên điều hướng. Cùng với nó, bạn có thể sử dụng lệnh navText để thêm nhãn vào các nút điều hướng. Ngoài ra, bạn cũng không nên quên lệnh tự động phát, lệnh này cho phép bạn bật và tắt tính năng bắt đầu tự động lật các trang của thanh trượt khi tải trang. Với lệnh này, bạn cũng có thể sử dụng autoplayTimeout, mà bạn có thể đặt một giá trị cụ thể tính bằng mili giây, sẽ xác định thời gian giữa các lần tự động lật từng trang trình bày.
Nếu bạn sử dụng thiết kế web đáp ứng, tức là thiết kế trang của bạn sẽ tự động thay đổi tùy thuộc vào thiết bị được xem trên thiết bị nào, thì bạn chắc chắn cần nhớ lệnh responsive, cho phép bạn đặt số lượng trang trình bày để hiển thị tùy thuộc vào chiều rộng của màn hình mà trang đang được xem.
