Share Tạo slide hình ảnh với thư viện bxSlider

filiallion · 03/14/2018

Có nhiều cách để các bạn tạo slide trên website, tùy thuộc vào sở thích của mỗi người mà lựa chọn thư viện cho phù hợp. Bài viết này tôi sẽ hướng dẫn các bạn cách tạo slide với thư viện bxSlider, đây là một thư viện miễn phí có hỗ trợ nhiều tính năng giúp các bạn tạo các hiệu ứng đẹp khi thiết kế website.

Các bạn có thể tải thư viện bxSlider cũng như xem hướng dẫn cách tích hợp vào website tại địa chỉ https://bxslider.com/install.

Bài viết này tôi sẽ hướng dẫn các bạn sử dụng thư viện bxSlider với cấu trúc thư mục tôi đề nghị như sau:

Code:

css
-----jquery.bxslider.min.css
images
js
-----jquery-3.3.1.min.js
-----jquery.bxslider.min.js
-----script.js
index.html

Với cấu trúc thư mục như trên, tôi cũng đặt 2 tập tin hình ảnh hỗ trợ giao diện của thư viện bxSlider vào thư mục images và đây cũng là thư mục tôi chứa các hình ảnh ví dụ.

Các bạn mở tập tin css/jquery.bxslider.min.css và điều chỉnh lại đường dẫn tới 2 tập tin hình ảnh của thư viện bxSlider cho chính xác.

Mở tập tin js/script.js và nhập vào nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#bx-slider').bxSlider({
        mode: 'fade',
        captions: true,
        slideWidth: 600
    });
});

Mở tập tin index.html và nhập vào nội dung mã lệnh như sau:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/jquery.bxslider.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/script.js"></script>
<title>bxSlider</title>
</head>
<body>
<div id="bx-slider">
    <div>
        <img src="images/01.jpg" title="Image 01">
    </div>
    <div>
        <img src="images/02.jpg" title="Image 02">
    </div>
    <div>
        <img src="images/03.jpg" title="Image 03">
    </div>
</div>
</body>
</html>

Bây giờ các bạn chạy tập tin index.html và xem kết quả.

Share Tạo slide hình ảnh với thư viện bxSlider

filiallion

Administrator

Attachments