PgwSlideshow是一款非常实用的响应式、支持触摸屏的jQuery轮播图插件。该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度。你也可以自定义轮播图的高度,图片宽度会根据高度等比例匹配。 该轮播图插件的特点有:响应式设计;支持桌面和移动手机设备;轻量级,压缩后只有4kb;可以通过CSS来自定义轮播图的样式;
工具/原料
jQuery、pgwslideshow.js和pgwslideshow.css文件
文件引入
2
该轮播图插件依赖于jQuery(1.0以上版本),使用前要引入这些依赖文件,jQuery、pgwslideshow.js和pgwslideshow.css文件。
调用插件
1
该轮播图插件的基本HTML结构使用的是无序列表
- 。你可以添加多个
- 元素,每一个
- 元素中包含一张用于轮播的图片。alt:这个属性定义图片的标题,它会在图片显示的时候作为标题显示。data-description:该属性会在图片标题下方添加一行新的文本,用于额外的描述信息。data-large-src:如果你希望缩略图使用小尺寸的图片,显示的是大尺寸的图片,就可以使用data-large-src属性来指定大尺寸图片的URL。另外,如果你希望某张图片链接到特定的URL,可以使用标签来包裹图片,每张图片都可以单独设置它的对应链接地址。
2
调用插件代码如下:
配置参数
应用效果
下一篇:怎么使用CSS实现轮播图?