Người Viết : ViKiMi Editor

Sử dụng Thư viện Kèm Theo của jQuery, cho phép tạo Slider một cách nhanh chóng hiệu quả
Khi bạn muốn tạo một Slider sử dụng jQuery thì đó đúng là một lựa chọn tốt. Sẽ không có một điều gì mà có thể như vậy, tất cả miễn phí và cho phép bạn có thể dễ dàng làm việc. jQuery có rất nhiều thư viện miễn phí đi kèm để bạn có thể yên tâm về sự an toàn và khả năng làm việc tốt. Tất nhiên, bạn vẫn phải tìm được những thứ có đánh giá cao về uy tín.
Để thiết kế Slider bằng cách xử lý Code hoàn toàn thật tốn nhiều thời gian.
Vậy có cách gì để bạn có thể thay thế điều này?
+ Hãy chọn một Thư viện đi kèm của jQuery và sử dụng
+ Có rất nhiều thứ như vậy và miễn phí.
+ Một thứ bạn có thể quan tâm là bxSlider. Đây là một Thư viện mà bạn có thể tuỳ chỉnh để tạo các trình diễn ảnh hoặc trình diễn bất cứ thứ gì bạn cần làm.
Sử dụng bx Slider Library dễ dàng và đơn giản :
1 ) Điều đầu tiên là bạn cần phải Thêm tệp Javascript và CSS vào trang Web bạn muốn thực hiện một trình diễn ảnh hoặc bất cứ điều gì tương tự.
Có 2 lựa chọn chon bạn để giải quyết :
+ Tải các tệp này từ URL CDN :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
+ Hoặc bạn có thể Download trực tiếp các File này từ kho lưu trữ của bxSlider và đặt các File vào thư mục Website của bạn.
2 ) Thêm xử lý CSS cho Slider :
+ Bạn hãy thêm CSS vào <head> của trang Web :
/** Hãy thêm kiểu CSS cho slider tại đây
* Tạo kiểu CSS cho thẻ <h2> của Slider, etc
*/
div.slider h2 {
width: 600px;
text-align: center;
background: orange;
font-size: 6rem;
line-height: 3;
margin: 0;
}
3 ) Bạn cần biết một điều quan trọng đó là :
<div class="slider">
<h2> Trang Trình Bày 1</h2>
<h2> Trang Trình Bày 2</h2>
<h2> Trang Trình Bày 3</h2>
<h2> Trang Trình Bày 4</h2>
<h2> Trang Trình Bày 5</h2>
</div>
Đây chính là nội dung mà Slider của bạn có thể trình diễn.
Bạn có thể đặt nội dung này ở bất kỳ đâu trên trang Web & sử dụng.
+ Mỗi một Trang trình bày sẽ là một trang Slider được hiển thị.
+ Bạn cần bao nhiêu trang Slider thì sẽ có bấy nhiêu trang trình bày.
+ Vì vậy trên mỗi trang trình bày sẽ là một nội mà bạn muốn đưa đến người dùng.
Nên để tạo một Slider để trình bày tốt hơn thì bạn có thể thay thế đoạn trên bằng đoạn Code khác như sau ( Tuỳ chỉnh theo cách bạn thiết kế … ):
<div class="slider">
<div> <img/> <h2> Trang Trình Bày 1</h2> </div>
<div> <img/> <h2> Trang Trình Bày 2</h2> </div>
<div> <img/> <h2> Trang Trình Bày 3</h2> </div>
<div> <img/> <h2> Trang Trình Bày 4</h2> </div>
<div> <img/> <h2> Trang Trình Bày 5</h2> </div>
</div>
4 ) Thực hiện khởi chạy bxSlider :
Đây là một Thư viện miễn phí nên tất cả những xử lý Code quan trọng đã được bxSlider thiết kế. Công việc của bạn đó là lấy ra và sử dụng. Điều này thật đơn giản và dễ dàng với bất kỳ một ai.
Để khởi chạy cho bxSlider, bạn tạo đoạn <script> này phía trên thẻ </body>
<script>
$(document).ready(function(){
$(‘.slider’).bxSlider(Sử Dụng Các Tham số của bxSlider);
});
</script>
Các Tham số Bạn Có Thể Sử Dụng :
+ autoControls Parameter
Đây là tham số cho phép bật chế độ Play & Pause của Slider. Mặc định sẽ là False, vì vậy muốn sử dụng nó bạn hãy thiết lập true.
+ auto Parameter
Đây là tham số cho phép Slider có thể trình chiếu tự động hay không. Mặc định sẽ là False, vì vậy muốn sử dụng nó bạn hãy thiết lập true.
+ pager Parameter
Tham số này cho phép thêm số trang vào Slideshow
+ slideWidth Parameter
Tham số này cho phép bạn thiết lập độ rộng của Slider
+ mode Parameter
Tham số này cho phép thiết lập cách chuyển tiếp giữa các Slide : from—horizontal, vertical, and fade. Nó sẽ giúp Slider đẹp hơn.
+ captions Parameter
Tham số này được sử dụng nếu bạn muốn hiển thị tiêu đề cho mỗi slide. Tiêu đề được lấy từ thuộc tính title của thành phần HTML hình ảnh.
+ speed Parameter
Tham số này cho phép bạn thiết lập tốc độ cho Slider khi nó được chọn là Auto / Tự động trình chiếu. Và đơn vị là mili giây.
1 giây = 1000 mili giây
BẠN CÓ THỂ XEM CODE ĐẦY ĐỦ SAU ::
<!DOCTYPE html>
<html>
<head>
/** Thêm Tệp JS và CSS Của bxSlider từ CDN **/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<style>
body {
margin: 20px auto;
font-family: 'Lato';
font-weight: 300;
width: 850px;
overflow: hidden;
}
.bx-wrapper {
margin: 0 auto;
}
</style>
</head>
<body>
/** Nội Dung Slider **/
<div class="slider">
<div><img src="A-Beautiful-Landscape.png" title="A Beautiful Landscape"></div>
<div><img src=" Stationery-on-Table.png" title="Stationery on Table"></div>
<div><img src="A-Coffee-Mug.png" title="A Coffee Mug"></div>
</div>
/** Khởi Chạy bxSlider **/
<script>
$('.slider').bxSlider({
autoControls: true,
auto: true,
pager: true,
slideWidth: 600,
mode: 'fade',
captions: true,
speed: 1000
});
</script>
</body>
</html>
Bạn đã thấy cách tạo Slider với jQuery thật đơn giản. Bạn chỉ cần tìm kiếm các Thư viện đi kèm của jQuery và sử dụng nó. Tất nhiên, ở đây bạn không cần phải suy nghĩ Coding như thể nào. Tất cả đã được Thư viện làm việc, bạn chỉ cần lấy nó ra sử dụng. Thật ngắn gọn mà bất kỳ ai cũng có thể dùng nó được. Nếu bạn muốn tự xử lý Coding thì điều này cũng được.
+ Tạo Slider với jQuery thật dễ dàng đơn giản.