gridSlide是一款很酷的jQuery网格式多方向图片幻灯片插件。该幻灯片插件适用于显示多图片的场合,它会根据缩略图的位置在显示幻灯片时做相应的方向运动。

使用方法

HTML结构

该幻灯片插件的每一组图片都使用一个无序列表来包装,所有的图片都包裹在一个class为sliderdiv中。#slider-nav是用于放置缩略图的容器。

<div class="slider">
  <ul data-title="Row 1">
    <li><img src="img/img1-1.jpg" alt="image"></li>
    ...
  </ul>
  <ul data-title="Row 2">
    <li><img src="img/img2-1.jpg" alt="image"></li>
    ...
  </ul>
  <ul data-title="Row 3">
    <li><img src="img/img3-1.jpg" alt="image"></li>
    ...
  </ul>
</div>
<div id="slider-nav"></div>
    
调用插件
$(window).load(function() {
    $('.slider').gridSlide();
});
    

可用参数

该幻灯片插件有几个可用的参数:

nav: '#slider-nav',
menu: 'grid',
title: false,
imgGrid: false,
speed: 300      
    
  • nav:用于显示到后缩略图的容器。该参数接受一个选择权字符串。
    $('.slider').gridslide({
        nav: '.another-div'
    });        
          
  • menu:该参数可以设置为"grid"或"nav"。"grid"设置导航缩略图为网格缩略图的形式;"nav"设置导航为上下左右四个方向的控制图。
  • title:该选项允许你在使用导航缩略图"grid"模式时,指定每行缩略图的标题。你也可以在每个ul元素上使用data-title属性来指定标题。插件会在每行缩略图中添加一个h3标题。
  • imgGrid:imgGrid further extends the grid menu option by making the grid feature the images that you've included in the slider。
  • speed:切换幻灯片的速度。可以设置为Slow, Fast 或一个毫秒数。

更多关于该幻灯片插件的信息可以参考:www.dpurdy.me/plugins/gridslide