Daily Archives: August 2, 2015

example of jquery bxslider

Here is a full example of how to use bxslider to show image slider.

bxslider is also very good at fade in/out transition in div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
  <title></title>
  <head>
    <!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
 
<script language="javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
  mode: 'fade',
  captions: true
});
});
</script>
  </head>
 
  <body>
    <ul class="bxslider">
  <li><img src="pic1.jpg" /></li>
  <li><img src="pic2.jpg" /></li>
  <li><img src="pic3.jpg" /></li>
</ul>
  </body>
</html>