sldr - 兼容手机IE8响应式幻灯片jquery插件

PetitQ 幻灯片/轮播 2018-11-06 1.23K 0 0

jquery.sldr.js 是一款兼容 IE8+和移动手机设备的响应式 jQuery 幻灯片插件。该幻灯片插件可以自适应图片宽度，提供丰富的回调函数，并且支持 Android 和 IOS 等移动触摸设备。它的特点还有：

灵活的设置，可定义前后导航按钮，分页导航按钮等

也想出现在这里？联系我们吧

可设置多重幻灯片宽度，可见区域，并且完全响应式设计

在初始化时提供丰富的回调函数

可以通过编程在页面加载之后动态的添加图片

兼容 IE 7+, Chrome, Safari, Firefox, IOS 3+, Android 3+

使用方法：

在页面中引入 jquery 和 jquery.sldr.js 文件。

<script src="js/jquery.min.js"></script>

<script src="js/stickyelements-animate.js"></script>

HTML 结构：

每一个幻灯片 slide 元素都需要一个唯一的 class 标识。

```
<div id="SLDR-ONE" class="sldr">
```
```
    <ul class="wrp animate">
```
```
        <li class="elmnt-one">
```

          <img src="img/Lake.jpg" width="1000" height="563">

```
        </li>
```
```
        <li class="elmnt-two">
```

          <img src="img/Mountain-Range.jpg" width="1000" height="563">

```
        </li>
```
```
        <li class="elmnt-three">
```

          <img src="img/Mt-Fuji.jpg" width="1000" height="563">

```
        </li>
```
```
        <li class="elmnt-four">
```

          <img src="img/Pink-Forest.jpg" width="1000" height="563">

```
        </li>
```
```
    </ul>
```
```
</div>
```

CSS 样式：

下面的 CSS 样式用于使幻灯片从左向右移动。

```
.sldr {
```
```
    max-width: 825px;
```
```
    margin: 0 auto;
```
```
    overflow: visible;
```
```
    position: relative;
```
```
    clear: both;
```
```
    display: block;
```
```
}
```
```
 
```
```
.sldr > ul.animate {
```

    -webkit-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000);

       -moz-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000);

         -o-transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000);

            transition: margin 0.75s cubic-bezier(0.860, 0.000, 0.070, 1.000); /* ease-in-out */

```
}
```
```
 
```
```
.sldr > ul > li {
```
```
    float: left;
```
```
    display: block;
```
```
    width: 825px;
```
```
}
```

初始化插件：

在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。

```
$( window ).load( function() {
```
```
 
```
```
    $( '.sldr' ).each( function() {
```
```
        var th = $( this );
```
```
        th.sldr({
```

            focalClass    : 'focalPoint',

            offset        : th.width() / 2,

            sldrWidth     : 'responsive',

            nextSlide     : th.nextAll( '.sldr-nav.next:first' ),

            previousSlide : th.nextAll( '.sldr-nav.prev:first' ),

            selectors     : th.nextAll( '.selectors:first' ).find( 'li' ),

            toggle        : th.nextAll( '.captions:first' ).find( 'div' ),

```
            sldrInit      : sldrInit,
```
```
            sldrStart     : sldrStart,
```

            sldrComplete  : sldrComplete,

```
            sldrLoaded    : sldrLoaded,
```
```
            sldrAuto      : true,
```
```
            sldrTime      : 2000,
```
```
            hasChange     : true
```
```
        });
```
```
    });
```
```
});
```

配置参数：

jquery.sldr.js 幻灯片的可用配置参数有：

参数	描述
focalClass	当前聚焦的 slide 的 class 名称，默认为："focalPoint"。
offset	居中的 slide 的位置，默认为`$(this).width() / 2`。
selectors	分页圆点的选择器，例如：`$('ul > li')`，无默认值。
toggle	用于切换 focalClass 的一系列元素，可用于显示或隐藏标题，例如：`$('.descriptions > div'')`，无默认值。
nextSlide	next slide 的选择器，无默认值。
previousSlide	previous slide 的选择器，无默认值。
hashChange	可选的布尔值参数，用于传入回调函数。无默认值。
resizeDelay	浏览器窗口尺寸改变的延迟时间，默认为 1。
sldrNumber	在插件初始化时幻灯片数量的增量，默认为 0。
sldrInit	回调函数，接收函数名称。当 sldr 初始化后被 DOM 管理之前触发。
sldLoaded	回调函数，接收函数名称。当某个幻灯片被加载后触发。
sldrLoaded	回调函数，接收函数名称。当幻灯片被完全加载，并被 DOM 管理之后触发。
sldrStart	回调函数，接收函数名称。当幻灯片 slide 被聚焦前触发。
sldrComplete	回调函数，接收函数名称。当幻灯片 slide 被聚焦后触发。
sldrWidth	幻灯片的宽度。设置为"responsive"表示全屏宽度。如果要设置固定宽度可以设置一个具体的数值。
animate	接收函数名称。自定义动画。默认为 jquery.sldr.js 中的"base.animate"。
animateJquery	强制使用 jquery animate()动画。默认为 flase，使用的是 CSS transitions 动画。浏览器不支持 CSS transitions 时使用 jQuery 动画。
sldrAuto	动画过渡的自动定时器。默认为 false。
sldrTime	动画过渡的时间。默认为 8000。
isBrowser	为浏览器设置的变量，默认为 navigator.userAgent。
isIE	为 IE 浏览器设置的变量。默认为 flase，将根据 navigator.userAgent 来设置。

回调函数:

```
/**
```

 * When the sldr is initiated, before the DOM is manipulated

 * @param {object} args the slides, callback, and config of the slider

```
 * @return null
```
```
 **/
```
```
function sldrInt( args ) { }
```
```
 
```
```
/**
```
```
 * When individual slides are loaded
```

 * @param {object} args the slides, callback, and config of the slider

```
 * @return null
```
```
 **/
```
```
function sldLoaded( args ) { }
```
```
 
```
```
/**
```

 * When the full slider is loaded, after the DOM is manipulated

 * @param {object} args the slides, callback, and config of the slider

```
 * @return null
```
```
 **/
```
```
function sldrLoaded( args ) { }
```
```
 
```
```
/**
```

 * Before the slides change focal points

 * @param {object} args the slides, callback, and config of the slider

```
 * @return null
```
```
 **/
```
```
function sldrStart( args ) { }
```
```
 
```
```
/**
```

 * After the slides are done changing focal points

 * @param {object} args the slides, callback, and config of the slider

```
 * @return null
```
```
 **/
```
```
function sldrComplete( args ) { }
```

回调参数:

回调函数会返回一个带下列项目的对象。

```
{ 
```
```
    'slides' : { 
```
```
        (array of slides) 
```
```
    }, 
```
```
    'callback' : {
```

        (the previous, current, next slide variables)

```
    }, 
```
```
    'config' : {
```

        (all of the original settings described above)

```
}
```

Slides：

sld	Slide jQuery object
slideNum	Slide number
id	Slide id
class_name	Slide class
html	Slide inner html()

Callback:

sldr	幻灯片的 jQuery 对象
prevFocalIndex	前一个 slide 的 index()
prevSlideNum	前一个 slide 的号码
currentFocalIndex	当前 slide 的 index()
currentClass	当前 slide 的 class 名称
currentID	当前 slide 的 id
currentFocalPoint	从幻灯片左边到中间的像素距离
currentSlideNum	当前 slide 的号码
shiftWidth	从一个 slide 切换到下一个 slide 的数量
nextFocalIndex	下一个 slide 的 index()
nextSlideNum	下一个 slide 的号码

post load image 特性可以在页面加载之后逐一的加载图片。你需要根据下面的 HTML 结构，为每一个幻灯片元素添加一个 sldr-load 的 class，然后插件就会根据 'class' , 'src' , 'alt' , 'title' , 'width' 或 'height'这些属性来加载所需要的图片。

```
<div id="SLDR-ONE" class="sldr">
```
```
    <ul class="wrp animate">
```
```
        <li class="elmnt-one">
```

          <div class="sldr-load" src="img/Lake.jpg" width="1000" height="563"></div>

```
        </li>
```
```
        <li class="elmnt-two">
```

          <div class="sldr-load" src="img/Mountain-Range.jpg" width="1000" height="563"></div>

```
        </li>
```
```
        <li class="elmnt-three">
```

          <div class="sldr-load" src="img/Mt-Fuji.jpg" width="1000" height="563"></div>

```
        </li>
```
```
        <li class="elmnt-four">
```

          <div class="sldr-load" src="img/Pink-Forest.jpg" width="1000" height="563"></div>

```
        </li>
```
```
    </ul>
```
```
</div>
```

github 地址：https://github.com/devowhippit/jquery.sldr

sldr - 兼容手机 IE8 响应式幻灯片 jquery 插件

已有 307 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

sldr - 兼容手机IE8响应式幻灯片jquery插件

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

配置参数：

回调函数:

回调参数:

Slides：

Callback:

sldr - 兼容手机 IE8 响应式幻灯片 jquery 插件

相关文章

CSS3全屏商品轮播图jQuery特效

支持触摸屏全屏幻灯片jQuery特效

全屏切开效果幻灯片插件

发表回复取消回复

热销模板

幻灯片/轮播

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

配置参数：

回调函数:

回调参数:

Slides：

Callback:

sldr - 兼容手机 IE8 响应式幻灯片 jquery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复