纯JavaScript响应式图片幻灯片插件

Ideal-Image-Slider是一款纯JavaScript响应式图片幻灯片插件。该幻灯片的设计以简洁为目的，但是提供了扩展接口，可以扩展幻灯片的功能。该幻灯片的特点有：

• HTML5（SEO优化）
• 支持CSS3过渡效果
• 支持左右导航（包括移动手机的 touch/swipe ）
• 响应式
• HiDPI（高分辨率图片）支持
• ARIA支持
• 使用简单，没有任何外部依赖
• 可扩展性强
• 使用渐进增强
• 开放源代码

安装

可以通过bower来安装该幻灯片插件。

bower install ideal-image-slider --save                
              

使用方法

使用该幻灯片插件需要引入ideal-image-slider.css，ideal-image-slider.js和默认主题文件default.css。

<link rel="stylesheet" href="/path/to/ideal-image-slider.css">
<link rel="stylesheet" href="/path/to/themes/default/default.css">
<script src="/path/to/ideal-image-slider.js"></script>              
              

HTML结构

该幻灯片基本的HTML结构如下：

<div id="slider">
    <img src="img/1.jpg" alt="Minimum required attributes">
    <img data-src="img/2.jpg" src="" alt="Use data-src for on-demand loading">
    <img data-src="img/3.jpg" data-src-2x="img/3@2x.jpg" src="" alt="Use data-src-2x for HiDPI devices">
    <a href="#"><img data-src="img/4.jpg" src="" alt="Links work too"></a>
    ...
</div>             
              

在上面的HTML结构中，需要注意下面几点：

• 该幻灯片只支持图片，其它内容会被移除。
• data-src属性用于在需要时才加载相应的图片。
• 第一张图片不必使用data-src属性。
• 如果你指定了data-src-2x属性的图片，它会被用于支持HiDPI的设备上（例如苹果的retina设备）

初始化插件

然后可以使用下面的方法来创建幻灯片。

new IdealImageSlider.Slider('#slider');                
              

也可以设置一些配置参数。

var slider = new IdealImageSlider.Slider({
    selector: '#slider',
    height: 400, // Required but can be set by CSS
    interval: 4000
});
slider.start();                
              

注意：如果你没有在Javascript构造函数中设置height属性，就必须在CSS中设置这个属性。

配置参数

事件

可以在设置中传入事件回调函数。

new IdealImageSlider.Slider({
    selector: '#slider',
    onStart: function(){
        console.log('onStart');
    }
});                
              

API

要使用API方法，首先需要保存一个幻灯片的示例对象。

var slider = new IdealImageSlider.Slider('#slider');
slider.start();