Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery
Webdesign

Cách xây dựng một Full Screen Carousel với Owl.js

by
Difficulty:IntermediateLength:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong một bài viết trước tôi đã chỉ cho bạn cách xây dựng một bộ carousel tuỳ biến với slick.js. Hôm nay, tôi sẽ trình bày về quá trình tạo một full screen carousel với Owl.js (hoặc "Owl Carousel").

Như thường lệ, để có được ý tưởng ban đầu về những gì chúng ta sẽ xây dựng, hãy xem bản demo trên CodePen (xem phiên bản lớn hơn để có trải nghiệm tốt hơn):

Owl Carousel là gì?

Owl.js là một plugin jQuery nổi tiếng được tạo ra bởi David Deutch cho phép bạn xây dựng các carousel hấp dẫn. Để hiểu rõ hơn những gì plugin này có thể cung cấp cho bạn, hãy xem các bản demo.

Rất vui, nó có hỗ trợ trình duyệt rất tốt, đã được thử nghiệm trên các thiết bị sau:

  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

Để biết thêm chi tiết hãy xem tài liệu hướng dẫn.

Bắt đầu với Owl.js

Để bắt đầu với Owl, hãy bắt đầu bằng cách tải về và cài đặt các tập tin sau trong dự án của bạn:

  • jQuery
  • owl.carousel.css hoặc phiên bản rút gọn của nó
  • owl.carousel.js hoặc phiên bản rút gọn của nó

Tùy chọn, bạn có thể muốn thêm tập tin owl.theme.default.css.

Bạn có thể lấy một bản sao của các tập tin owl tương ứng bằng cách truy cập repo Github của nó, bằng cách sử dụng một trình quản lý gói (ví dụ: npm) hoặc bằng cách tải các file cần thiết thông qua CDN (ví dụ: cdnjs). Đối với hướng dẫn này, tôi sẽ chọn tùy chọn thứ hai.

Đối với hướng dẫn này, ngoài các tập tin owl, I còn kết hợp BabelBootstrap 4.

Như đã nói, nếu bạn nhìn vào tab Settings của pen demo, bạn sẽ thấy rằng tôi đã thêm ba tập tin CSS bên ngoài và hai tập tin JavaScript bên ngoài.

CSS Settings on Codepen
JavaScript settings on CodePen

1. HTML

Để bắt đầu, chúng ta định nghĩa một carousel có ba slide. Mỗi slide đó chứa một tiêu đề, phụ đề và nút CTA.

Đây là cấu trúc cần thiết cho trang demo của chúng ta:

Cần phải cập đến hai thứ vào thời điểm này:

  1. Đoạn code ở trên sử dụng các lớp Bootstrap 4. Framework Bootstrap không phải là điều quan trọng; Tôi chỉ đưa nó vào vì tôi muốn làm phần CSS nhanh hơn.
  2. Tôi đã thêm hình nền của mỗi slide thông qua các kiểu nội tuyến. Phần lớn, khi bạn làm việc với nội dung động, đây là phương pháp CSS phổ biến nhất để thêm ảnh nền.

2. CSS

Khi HTML đã sẵn sàng, hãy nhìn vào các kiểu CSS mà chúng ta sẽ áp dụng cho trang của chúng ta. Để đơn giản, chúng ta chỉ thảo luận về một phần các kiểu hiện có.

Đầu tiên, chúng ta định nghĩa hai thuộc tính tùy viến và hai lớp trợ giúp:

Tiếp theo, chúng ta chỉ định kiểu cho các slide carousel, bao gồm các hiệu ứng chuyển tiếp:

Cuối cùng, chúng ta thiết lập một số quy tắc cho các phương thức điều hướng:

Lưu ý: Các slide phải chiếm toàn bộ chiều cao cửa sổ và do đó chúng ta cho chúng height: 100vh. Tuy nhiên, vì đơn vị này không nhất quán trên một số thiết bị (ví dụ: thiết bị iOS), một tùy chọn khác là thiết lập độ cao thông qua JavaScript (xem bảng JavaScript của bản demo để biết thêm thông tin).

3. JavaScript

Lúc này, chúng ta đã sẵn sàng hướng sự chú ý đến JavaScript.

Khởi tạo Carousel

Bước đầu tiên, chúng ta sẽ khởi tạo carousel. Mặc định, plugin cung cấp các "điều hướng dạng dấu chấm", nhưng carousel của chúng ta cũng sẽ có các mũi tên điều hướng.

owl navigation options
Tùy chọn điều hướng Owl

Chúng ta kích hoạt tùy chọn điều hướng thông qua thuộc tính cấu hình nav. Ngoài ra, chúng ta định nghĩa một số SVG tùy biến nhờ vào thuộc tính cấu hình navText.

Code kích hoạt carousel được hiển thị bên dưới:

Thêm hiệu ứng động vào Slide

Bước tiếp theo, chúng ta thêm hiệu ứng động vào mỗi slide. Hành vi này được xử lý thông qua sự kiện changed mà owl cung cấp.

Đây là code để làm điều đó:

Vì vậy, mỗi lần chúng ta truy cập một slide mới, trước tiên, nội dung của tất cả các slide sẽ biến mất. Sau đó, nội dung của slide hiện tại xuất hiện với hiệu ứng động đẹp mắt.

Lưu ý: thay vì sự kiện changed, chúng ta cũng có thể sử dụng sự kiện translated.

Lúc này, chúng ta đã thấy hiệu ứng động được kích hoạt như thế nào khi chúng ta duyệt qua các slide. Nhưng chúng ta cũng cần hiệu ứng đó khi ban đầu carousel được tải. Để thực hiện chức năng này, chúng ta sẽ sử dụng sự kiện initialized.

Đây là code liên quan đến sự kiện này:

Trong sự kiện đó, chúng ta thêm lớp is-transitioned vào các phần tử của slide đầu tiên.

Cần lưu ý là sự kiện này phải được đính kèm trước khi khởi tạo carousel.

Ngăn chặn nhảy trang khi tải

Trước khi tiếp tục, hãy giải quyết một vấn đề khó. Nếu bạn nhìn vào trang demo, bạn sẽ thấy rằng có một phần tử section được định nghĩa bên dưới carousel. Mặc định, cho đến khi carousel tải, nội dung của section xuất hiện và một hiện tượng nhảy trang nho nhỏ xảy ra trong trang của chúng ta.

Có hai cách để khắc phục hành vi không mong muốn này. Đầu tiên, chúng ta có thể thêm một preloader (chúng ta đã làm điều đó trong hướng dẫn liên quan đến slick). Một tùy chọn thứ hai mà chúng ta sẽ thực hiện ở đây là ẩn section đó và hiển thị nó ngay khi carousel được khởi tạo.

Về mặt code, quy tắc CSS cần thiết là quy tắc này:

Và code JavaScript:

Thiết lập vị trí các chấm điều hướng

Điều cuối cùng chúng ta phải làm là định vị các chấm điều hướng. Mặc định, nó được xác định là absolute. Những điều sau đây sẽ xảy ra:

  1. Nó nên được căn theo chiều ngang với phần tử .owl-slide-text của slide đích.
  2. Nó nên được đặt bên dưới phần tử đó với khoảng cách trên 20px.

Hàm chạy và thiết lập vị trí mong muốn cho các dấu chấm của chúng ta là setOwlDotsPocation.

Đây là code cho hàm đó:

Điều này cô lập phần tử .owl-slide-text của slide hiện tại và truyền vào dưới dạng đối số cho hàm phụ doDotsCalculations.

Đây là hàm phụ:

Bên trong hàm này, chúng ta thiết lập các giá trị topleft thích hợp của phần tử .owl-dots dựa trên chiều cao và vị trí của phần tử đích.

Xử lý khi kích thước trình duyệt thay đổi

Thêm một bước nữa, vị trí các chấm nên được cập nhật khi chúng ta thay đổi kích thước cửa sổ trình duyệt. Để đạt được điều này, chúng ta tận dụng sự kiện resize của owl.

Đây là code cần thiết:

Định vị trí tùy thuộc vào nội dung

Cuối cùng nhưng không kém phần quan trọng, khi chúng ta điều hướng qua các slide, các chấm phải được định vị lại tùy thuộc vào chiều cao và vị trí của nội dung của slide hiện hành. Nhờ sự kiện changed một lần nữa, chúng ta có thể giải quyết yêu cầu mới đó.

Đây là code liên quan:

Mẹo

Trước khi kết thúc, hãy thảo luận về một lỗi phổ biến trên owl. Nếu chúng ta loại bỏ phần nằm bên dưới carousel, thanh cuộn dọc sẽ biến mất và một phần của slide liền kề xuất hiện.

How to remove the right gap when there isnt vertical scrollbar

Để khắc phục điều này, chúng ta kích hoạt sự kiện refresh sau khi khởi tạo carousel, giống như thế này: $($OwlCarousel).trigger("refresh.owl.carousel");

4. Trình duyệt Hỗ trợ

Bản demo hoạt động tốt trong tất cả các trình duyệt gần đây và bạn có thể sử dụng nó một cách an toàn trong các dự án của mình. Dưới đây là sơ lượt về những gì chúng ta đã xây dựng:

Phần kết luận

Trong bài hướng dẫn này, chúng ttai đã xoay sở để xây dựng một full screen carousel với Owl.js. Hy vọng rằng bạn sẽ học được một số kỹ năng mới mà bạn có thể áp dụng vào thực tế trong các dự án sắp tới của mình. Như mọi khi, nếu bạn có bất kỳ câu hỏi nào, hãy cho tôi biết trong phần bình luận bên ​​dưới đây.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.