JQUERY插件-slider-pro幻灯片轮播图jQuery插件

发布：2020/9/16 23:26:31作者：管理员来源：本站浏览次数：1359

Slider-pro是用于移动设备的模块化、响应式、 jQuery轮播插件。 jQuery Carousel插件提供了各种配置参数和方法，可以快速创建多种轮播效果模式。其主要特点是：

支持模块化。
响应式设计。
支持移动设备。
使用CSS3过渡平滑动画过渡。
支持无限滚动。
支持轮播旋转木马模式。
支持全屏宽度和全屏扩展。
支持缩略图浏览模式。
支持延迟加载图像。
支持视频播放。
各种屏幕视频的不同大小的图片。
支持javascript断点。

使用方法

在页面中引入slider-pro.min.css文件和jQuery、jquery.sliderPro.min.js文件。

<link href="css/slider-pro.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sliderPro.min.js"></script>

HTML

<div class="slider-pro" id="my-slider">
  <div class="sp-slides">
    <!-- Slide 1 -->
    <div class="sp-slide">
      <img class="sp-image" src="path/to/image1.jpg"/>
    </div>

    <!-- Slide 2 -->
    <div class="sp-slide">
      <p>Lorem ipsum dolor sit amet</p>
    </div>

    <!-- Slide 3 -->
    <div class="sp-slide">
      <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
      <p class="sp-layer">consectetur adipisicing elit</p>
    </div>
  </div>
</div>

初始化插件

最后通过下面的方法来初始化该反光特效的按钮插件。

FluentRevealEffect.applyEffect(".btn", {
  lightColor: "rgba(255,255,255,0.1)",
  gradientSize: 150
})

在页面DOM元素加载完毕之后，通过sliderPro()方法来初始化该轮播图插件。

jQuery( document ).ready(function( $ ) {
    $( '#my-slider' ).sliderPro();
  });

GitHub地址：https://github.com/bqworks/slider-pro

　C#怎么实现文件下载功能的四种方法

C# 对象与JSON字符串互相转换的三种方式　

jQuery教程锚点滚动插件anchorScroll.js详解 jQuery插件开发详细教程-终极教程总结 GooFlow工作流插件jquery,vue,react工作流插件 jquery动画插件jQuery Easing Plugin .NET MVC使用jQuery插件验证前端jquery树形控件jstree插件使用及方法 jquery 图片连线插件如何封装jQuery插件 jQuery 插件封装的方法幻灯片插件-jquery.sliderPro.min.js

柏港建站平台

柏港 Jquery

JQUERY插件-slider-pro幻灯片轮播图jQuery插件

使用方法

HTML

初始化插件

柏港为您推荐了一些相关资讯