Tạo Slider Responsive sử dụng jQuery cho Website

Tạo Slider Responsive sử dụng jQuery cho Website sử dụng bxSlider việc đầu tiên bạn cần làm là dowload code tại đây

Sau khi dowload xong giải nến ra và up lên website của bạn, chỉ cần nhớ đường dẫn đến file của bạn và làm theo hướng dẫn dưới đây.

Hướng dẫn cài đặt

Bước 1: Link CSS/JS và Jquery(1.8.2 google)

Link đến file bạn vừa up lên hosting của mình chú ý sử dụng đường dẫn tuyệt đối nếu cần.

<!-- jQuery library (served from Google) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Bước 2: Tạo cấu trúc html

Tạo <ul> <li> như hình dưới chú ý class của UL sẽ thực hiện ở bước sau

<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>

Bước 3: Gọi JS

Chú ý đến $(‘.bxslider‘) là class của UL bạn đặt nhé, bạn có thể sử dụng nhiều slider khác nhau miễn sao chúng khác class là được.

<script type="text/javascript">
 jQuery("document").ready(function($) {
  $('.bxslider').bxSlider({auto: true, pause: 5000});
 })        
</script>

bxSlider là một silder đơn giản không có tùy chọn hiệu ứng chuyển ảnh nhưng mà có nhiều tùy chọn kiểu slider bạn có thể xem ví dụ tại đây và dễ dàng sử dụng.