Home >Web Front-end >JS Tutorial >jQuery plug-in bxSlider implements responsive focus map_jquery
Excellent responsive jQuery focus map plug-in bxSlider, excellent responsive layout design jQuery plug-in, adaptive
Suitable for any device, switching content can be video, picture, HTML, support touch devices, custom function
callback, supports numerous parameter custom configurations, and the browser supports Firefox, Chrome, Safari,
iOS, Android, IE7.
Usage:
1. Load jQuery and plug-ins
<!-- jQuery library (served from Google) --> <script src="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" />
2.HTML content
<ul class="bxslider"> <li><img src="/images/pic1.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> <li><img src="/images/pic2.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> <li><img src="/images/pic3.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> <li><img src="/images/pic4.jpg" / alt="jQuery plug-in bxSlider implements responsive focus map_jquery" ></li> </ul>
3. Function call
$(document).ready(function(){ $('.bxslider').bxSlider(); });
Please customize the function option configuration.
View DEMO Official website download
The above is the entire content of this article, I hope you all like it