Code hướng dẫn làm slide chạy sản phẩm năm 2024
Hôm này mình sẽ giới thiệu đến các bạn một mã nguồn mở tên là Owl Carousel để làm slideshow cực kì đẹp mắt và chuyên nghiệp, cách sử dụng cũng cực kỳ đơn giản, còn có thể tùy biến tùy theo ý của các bạn. Show Bài viết này sẽ hướng dẫn các bạn cách cài đặt và sử dụng mã nguồn mở “Ngon lành” này. Cài đặtBước 1: Tải source về trên trang https://owlcarousel2.github.io Bước 2: Giải nén source và vào thư mục dist để copy file JS và CSS Thư mục dist khi giải nén source Owl CarouselTrong thư mục dist sẽ có 2 file js các bạn copy 2 file này nhé. File js trong thư mục distCòn các file css thì sẽ nằm trong thư mục assets như hình trên. Copy hết tất cả các file trong thư mục này về luôn nhé. File css trong thư mục assetSau khi copy qua source của mình thì ta sẽ được như sau: CSS và JS của Owl Carousel sau khi copy sang thư mục của mìnhCác file *css sẽ nằm trong thư mục css và các file *js sẽ nằm trong thư mục js file index.html sẽ là file chúng ta sẽ code phần slideshow và phần thư mục images sẽ dùng để chứa hình ảnh của slide Bước 3: Trong file html các bạn nhúng các file css và js của Owl Carousel vào. Lưu ý: Phải có thư viện jQuery nằm ở đầu các *js khác nhé. Kết quả sau khi nhúng file js và css vào htmlCode HTMLĐể sử dụng các bạn chỉ cần code như sau:
Các bạn nên cho một thẻ Code JSĐể chạy được slideshow thì các bạn phải có đoạn js này nhé. Các bạn có thể tạo 1 file js đặt tên tùy ý rồi nhúng vào HTML (chú ý là nhúng vào bên dưới js thư viện jQuery và OwlCarousel)
Thế là xong bây giờ các bạn ra xem thành quả nhé. Nhưng như vậy vẫn chưa đủ đâu các bạn phải xem thêm các thuộc tính của OwlCarousel để có thể tùy chỉnh trên cái slider này của mình. Tùy chỉnhCác bạn có thể xem thêm các tùy chỉnh tại đây. Dưới đây mình sẽ chỉ hướng dẫn một số tùy chỉnh cần thiết thôi nha. Thay đổi icon nút qua trái, qua phảiĐể thay đổi icon nav các bạn chỉ cần thêm thuộc tính
Responsive slideĐể responsive trên slider các bạn sử dụng thuộc tính
Đoạn code trên bên trong thuộc tính responsive có nghĩa như sau:
Tắt mũi tên chuyển slide qua trái, phảiĐể tắt mũi tên chuyển slide thì các bạn set thuộc tính Tắt nút chuyển slideĐể tắt mũi tên chuyển slide thì các bạn set thuộc tính Không lặp lại slideĐể không quay lại slide ban đầu thì các bạn set thuộc tính Tư động dừng khi rê chuột vào slideĐể sử dụng chức năng này thì các bạn thêm thuộc tính
0 sửa thành false nếu không muốn. Tự động chuyển slide và thời gian chuyển slideĐể tự động chuyển slide các bạn dùng thuộc tính
1, và set thời gian chuyển slide bằng thuộc tính
2 với 1000 là bằng 1s Ngoài ra, các bạn có thể xem cách cài đặt tại trang document của Owl Carousel Kết luậnKhi thiết kế website chắc chắn các bạn sẽ cần đến slideshow, để ngồi code cả đống code cho slideshow thì chắc cũng mất đến cả buổi, vì vậy việc sử dụng open source là thứ cần thiết để tiết kiệm thời gian và công sức của các bạn. Cùng với open source Owl Carousel đầy đủ tính năng và dễ dàng tùy biến này thì còn ngại gì vài cái slideshow… Để tùy biến layout của slide thì các bạn buộc phải phân tích code của slide sau đó sử dụng CSS để tùy chỉnh thêm nhé. |