Hướng dẫn tạo slide ảnh cho website bằng jquery sử dụng bxslider

bxslider

Hướng dẫn tạo slide ảnh cho website sử dụng thư viện bxslider:

Trang chủ bxslider các bạn tham khảo ở đây
Hiện tại phiên bản mới nhất của nó là 4.2.15, các bạn truy cập trang github của bxslider của nó để cập nhật các phiên bản mới nhất: Để tạo slide rất đơn giản, đầu tiên các bạn nhúng các thư viện cần thiết:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

Tiếp theo, tạo các hình ảnh để hiển thị trong slide

<div class="slider">
   <div class="slider_box"><img src="http://s1.picswalls.com/wallpapers/2016/06/10/4k-desktop-wallpaper_065227602_309.jpg"></div>
   <div class="slider_box"><img src="http://thuthuatphanmem.vn/uploads/2017/11/05/hinh-nen-4k-dep-1_124942.jpg" title="The long and winding road"></div>
   <div class="slider_box"><img src="http://s1.picswalls.com/wallpapers/2016/06/10/4k-desktop-wallpaper_065227602_309.jpg" title="Happy trees"></div>
   <div class="slider_box"><img src="http://thuthuatphanmem.vn/uploads/2018/06/18/hinh-nen-laptop-4k-ho-nuoc-mua-thu-trong-vat-cuc-dep_034432513.jpg" title="Happy trees"></div
</div>

Bước quan trọng nữa là thêm code js để tạo slide:

<script>
  $(document).ready(function(){
    $('.slider').bxSlider();
  });
</script>

Vậy là xong. Code của toàn bộ file này như sau:

<html>
<head>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>

</head>
<body>

<div class="slider">
   <div class="slider_box"><img src="http://s1.picswalls.com/wallpapers/2016/06/10/4k-desktop-wallpaper_065227602_309.jpg"></div>
   <div class="slider_box"><img src="http://thuthuatphanmem.vn/uploads/2017/11/05/hinh-nen-4k-dep-1_124942.jpg"></div>
   <div class="slider_box"><img src="http://s1.picswalls.com/wallpapers/2016/06/10/4k-desktop-wallpaper_065227602_309.jpg"></div>
   <div class="slider_box"><img src="http://thuthuatphanmem.vn/uploads/2018/06/18/hinh-nen-laptop-4k-ho-nuoc-mua-thu-trong-vat-cuc-dep_034432513.jpg"></div> 
</div>

</body>
</html>

Bxslider cũng có các option cho bạn tuỳ chỉnh. Chẳng hạn nếu các bạn muốn slide tự động next thì làm như sau:

$('.slider').bxSlider({
  auto: true,
  easing: 'easeOutExpo',
  speed: 500,
});

Chúc các bạn thành công. Có gì thắc mắc cứ để lại comment ở dưới nhé 🙂

2
Leave a Reply

avatar
  Subscribe  
newest oldest
Notify of
Nam Le
Guest
Nam Le

Ra thêm bài viết nữa đi bạn … 😀