Nivo slider – làm slide ảnh với nivo slider

Cập nhật lần cuối 18/03/2017 by trong HTML&CSS vào 19/01/2014 có 4991 Views

Giới thiệu về Nivo Slider jQuery Plugin

Nivo slider là một thư viện jquery giúp chúng ta làm được 1 slide ảnh tuyệt vời với nhất nhiều hiệu ứng khác nhau (hiện tại là 16 hiệu ứng …wow ….  Quá tuyệt vời )… Cùng với 4 giao diện mặc định sẵn có cho ta thoải mái lựa chọn. Nếu không thích mặc định bạn cũng có thể tự chỉnh css để vừa với ý mình ^^

nivoslider

Có hiện thumb thay cho nút ấn hoặc số

Ngoài ra hiện tại Nivo slider hỗ trợ responsive, có thể thích hợp với mọi kích thước màn hình. Phù hợp với xu thế thiết kế web hiện nay.

Hỗ trợ nút next, previous và nút chọn các ảnh rất hữu dụng.

Xem Demo Xem demo với 4 giao diện Download Ví Dụ

Cách sử dụng

Trước tiên bạn hãy tạo ra một file html cơ bản hoặc giao diện web đã hoàn chỉnh của bạn.

Bước 1: chèn thư viện nivo slider vào web (jQuery + Css)

Bạn chèn đoạn code sau vào trước thẻ đóng head </head>. Mục đích là gọi thư viện nivo slider vào và dịnh dạng css mặc định của nivo slider.


<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/light/light.css" type="text/css" media="screen" />
<!--Thư viện Jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--nivo slider-->
<script src="js/jquery.nivo.slider.pack.js"></script>

Như mình đã nói ở trên. Nivo slider có 4 theme mặc định. ở đây mình dùng theme light nên có đường dẫn tớ file css là: css/light/light.css bạn hãy thay đổi để phù hợp với bạn nha. Có trong file down về.

Bước 2: Chèn nội dung html mà bạn muốn hiển thị

Chèn đoạn mã sau vào nơi mà bạn muốn hiển thị slide ảnh.


<div class="slider-wrapper theme-light">
 <div id="slider" class="nivoSlider">
 <img src="Aviano.jpg" data-thumb="Aviano.jpg" alt="" />
 <a href="http://levantoan.com"><img src="United.jpg" data-thumb="United.jpg" alt="" title="Đây là nội dung của thẻ title" /></a>
 <img src="nuochoa.jpg" data-thumb="nuochoa.jpg" alt="" data-transition="slideInLeft" />
 <img src="coach.jpg" data-thumb="coach.jpg" alt="" title="Chỉ cần thêm nội dung vào thẻ title là được" />
 </div>
 </div>

Bạn chú ý:

– Thay toàn bộ link ảnh trên ở thẻ src =”” và data-thumb=”” bằng link ảnh của bạn nhé.

– Để hiện thị caption thì chỉ cần thêm nội dung vào thẻ title. Còn cách khác tham khảo thêm tại đây

– class “theme-light” thay bằng tên theme bạn muốn (có 4 theme tương ứng với 4 folder default, light, dark, bar trong file down về) và nhớ thay lại đường dẫn css ở trên nếu bạn thay đổi class này nhé.

VD: theme-dark hoặc theme-default

Bước 3: Gọi plugin làm việc.

Bạn chèn tiếp đoạn code sau vào trước thẻ head </head> (sau đoạn code ở bước 1 nhé)


<script type="text/javascript">
$(window).load(function() {
 $('#slider').nivoSlider();
});
</script>

Hoàn thành

Đến đây bạn chạy thử là đã ok rồi đó…

Code hoàn thành của mình như sau


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nivo slider demo</title>
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/light/light.css" type="text/css" media="screen" />
<!--Thư viện Jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--nivo slider-->
<script src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
 $('#slider').nivoSlider();
});
</script>

<style type="text/css">
/*phần này không cần thiết cho site bạn nhé*/
.slider-wrapper {
max-width: 660px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
</style>
</head>

<body>

<div class="slider-wrapper theme-light">
 <div id="slider" class="nivoSlider">
 <img src="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-Aviano-660x220-op2.jpg" data-thumb="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-Aviano-660x220-op2.jpg" alt="" />
 <a href="http://dev7studios.com"><img src="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-United-660x220-op2.jpg" data-thumb="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-United-660x220-op2.jpg" alt="" title="Đây là nội dung của thẻ title" /></a>
 <img src="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-nuochoa-660x220-op1.jpg" data-thumb="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-nuochoa-660x220-op1.jpg" alt="" data-transition="slideInLeft" />
 <img src="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-coach-660x220-op1-1.jpg" data-thumb="http://i1116.photobucket.com/albums/k575/privateshoppingclub/banner-coach-660x220-op1-1.jpg" alt="" title="Chỉ cần thêm nội dung vào thẻ title là được" />
 </div>
 </div>

</body>
</html>

Xem demo

Cài đặt cho nivo slider

Đây là danh sách các hàm có thể cài đặt cho slide được tốt hơn, đẹp hơn


<script type="text/javascript">
$('#slider').nivoSlider({
 effect: 'random', // kiểu hiệu ứng, xêm thêm bên dưới
 slices: 15, // For slice animations
 boxCols: 8, // For box animations
 boxRows: 4, // For box animations
 animSpeed: 500, // tốc độ slide
 pauseTime: 3000, // Thời gian hiện của mỗi slide
 startSlide: 0, // Slide hiện lên đầu tiên (0 là slide đầu tiên)
 directionNav: true, // Next & Prev navigation
 controlNav: true, // 1,2,3... navigation
 controlNavThumbs: false, // Hiển thị ảnh nhỏ thay vì nút tròn hoặc số, nhớ cho link ảnh nhỏ vào thẻ data-thumb
 pauseOnHover: true, // Dừng slide khi đưa chuột vào
 manualAdvance: false, // Nếu để True thì slide sẽ ko tự động chạy
 prevText: 'Prev', // Prev directionNav text
 nextText: 'Next', // Next directionNav text
 randomStart: false, // Nếu để true thì sẽ bắt đầu bằng slide bất kỳ
 beforeChange: function(){}, // Làm điều gì đó trước khi chạy mỗi slide
 afterChange: function(){}, // Làm điều gì đó sau khi chạy xong mỗi slide
 slideshowEnd: function(){}, // Làm điều gì đó khi chạy xong slide cuối cùng
 lastSlide: function(){}, // Làm điều gì đó khi chạy slide cuối cùng
 afterLoad: function(){} // Làm điều gì đó trước khi chạy slide
});
</script>

List danh sách hiệu ứng của nivo slider

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Mở rộng cho các mã nguồn

Nivo slider đã có trên

Wordpress Plugin

Chúc các bạn thành công!

Nivo slider – làm slide ảnh với nivo slider
4.6 (91.11%) 9 votes
Từ khóa: , , ,
  • Bình luận
Có thể bạn quan tâm
x