slider-pro的简单使用说明

Posted 2020-08-15 lostkeys

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
				}
			}
		});