Install plug-ins
| The code is as follows: |
Copy code |
<! -- 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"/> |
HTML structure
| The code is as follows: |
Copy code |
<Ul class = "bxslider">
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul> Call plug-ins $ (Document). ready (function (){
$ ('. Bxslider'). bxSlider ();
}); |
Example
| The code is as follows: |
Copy code |
JS:
$ ('. Bxslider'). bxSlider ({
Mode: 'Fade ',
Captions: true
}); HTML: <Ul class = "bxslider">
<Li> </li>
<Li> </li>
<Li> </li>
</Ul> |
Example: automatic playback
| The code is as follows: |
Copy code |
JS:
$ ('. Bxslider'). bxSlider ({
Auto: true,
AutoControls: true
});
HTML:
<Ul class = "bxslider">
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
|
The effect is as follows:
