slider-pro的简单使用说明

最新推荐文章于 2024-09-16 07:08:02 发布

孙瑞宇

最新推荐文章于 2024-09-16 07:08:02 发布

阅读量806

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lostkeys/p/5975909.html

版权

sliderPro是一款基于jQuery的拓展，实现了上下图片轮播，右侧带有小略缩图，体积也非常小。与bootstrap的Unslider实现的效果是一样的。

用于首页部分还是挺不错的。

使用也是很简单的。css部分我不贴出来，就直接看一下js的初始化使用。

$( '#slider-pro' ).sliderPro({
			width: 670,
			height: 500,
			orientation: 'vertical',
			loop: false,
			arrows: true,
			buttons: false,
			thumbnailsPosition: 'right',
			thumbnailPointer: true,
			thumbnailWidth: 290,
			breakpoints: {
				800: {
					thumbnailsPosition: 'bottom',
					thumbnailWidth: 270,
					thumbnailHeight: 100
				},
				500: {
					thumbnailsPosition: 'bottom',
					thumbnailWidth: 120,
					thumbnailHeight: 50
				}
			}
		});

转载于:https://www.cnblogs.com/lostkeys/p/5975909.html