建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

响应式焦点轮播图滑动特效JQuery插件bxslider

来源:易助科技网浏览量:13收藏

简介


bxslider是一款功能强大的JQuery响应式焦点轮播图滑动特效插件。


响应式焦点轮播图滑动特效JQuery插件bxslider-示例图


插件特定:

充分响应各种设备,适应各种屏幕;

支持多种滑动模式,水平、垂直以及淡入淡出效果;

支持图片、视频以及任意html内容;

支持触摸滑动;

支持Firefox,Chrome,Safari,iOS,Android,IE7+。



使用


1.  引入文件


<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />

<!-- jQuery library -->
<script src="jquery-3.1.1.min.js"></script>

<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.js"></script>


2.  HTML


<ul class="bxslider">
  <li><img src="images/pic1.jpg" /></li>
  <li><img src="images/pic2.jpg" /></li>
  <li><img src="images/pic3.jpg" /></li>
  <li><img src="images/pic1.jpg" /></li>
  <li><img src="images/pic2.jpg" /></li>
</ul>


3.  调用


<script>
  $(document).ready(function() {
    $('.bxslider').bxSlider({
      mode: 'horizontal',
      moveSlides: 1,
      slideMargin: 40,
      infiniteLoop: true,
      slideWidth: 660,
      minSlides: 3,
      maxSlides: 3,
      speed: 800,
    });
  });
</script>



相关链接


官方地址 :https://bxslider.com/

GitHub 地址 :https://github.com/ChrisGhenea/bxslider-4