jQuery支持触摸屏响应式轮播图插件Sangarslider

 查看演示  website  立即下载

简要教程

Sangar Slider是一款功能非常强大的支持触摸屏的响应式jQuery轮播图插件。该轮播图插件具有图片响应式和支持移动触摸屏等特点，可用于作为jQuery插件或WordPress插件使用。该轮播图的特点有：

• 图片响应式和支持触摸屏设备

• 可制作全屏宽度轮播图

• 可以用于制作内容幻灯片

• 多种可用的轮播图导航方式：圆点按钮，文本和缩略图

• 可通过Javascript API来控制轮播图的导航

使用方法

该轮播图插件需要以下的外部依赖文件：

• jQuery

• jQuery migrate

• touchSwipe

• imagesloaded

使用这个轮播图插件要引入sangarSlider.css、sangar-skin-default.css和jquery.sangarSlider.js文件，以及上面提到的外部依赖文件。

<link rel="stylesheet" href="css/sangarSlider.css" type="text/css">
<link rel="stylesheet" href="css/sangar-skin-default.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-migrate.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/imagesloaded.min.js"></script>
<script type="text/javascript" src="js/jquery.sangarSlider.js"></script>

HTML结构

该轮播图的基本HTML结构如下：

<div class='sangar-slideshow-container' id='sangar-example'>
    <div class='sangar-content-wrapper' style='display:none;'>
        <div class='sangar-content'>
            <img src='images/slide-1.jpg' />
            <a href='#' target="_blank"></a>
        </div>
        <div class='sangar-content'>
            <img src='images/slide-2.jpg' />
            <a href='#'></a>
        </div>
        <div class='sangar-content'>
            <img src='images/slide-3.jpg' />
        </div>
        <div class='sangar-content'>
            <img src='images/slide-4.jpg' />
        </div>
        <div class='sangar-content'>
            <img src='images/slide-5.jpg' />
        </div>
    </div>
</div>

初始化插件

在页面加载完毕之后，通过下面的方法来初始化该轮播图插件。

jQuery(document).ready(function($) {
    $('#sangar-example').sangarSlider();
})

配置参数

下面是该轮播图插件的默认配置参数：

• animation : 'horizontal-slide',

• animationSpeed : 600,

• continousSliding : true,

• showAllSlide : false,

• timer :  false,

• advanceSpeed : 3000,

• pauseOnHover : true,

• startClockOnMouseOut : true,

• startClockOnMouseOutAfter : 800,

• directionalNav : 'autohide',

• directionalNavShowOpacity : '0.9'

• directionalNavHideOpacity : '0.1',

• directionalNavNextClass : 'exNext',

• directionalNavPrevClass : 'exPrev',

• pagination : 'bullet',

• paginationContent : ["Lorem Ipsum", "Dolor Sit", "Consectetur", "Do Eiusmod", "Magna Aliqua"],

• paginationContentType : 'text',

• paginationContentWidth : 120,

• paginationImageHeight : 90,

• paginationContentFullWidth : false,

• paginationExternalClass : 'exPagination',

• skinClass : 'sangar-skin-default',

• width : 650,

• height : 400,

• scaleSlide : false,

• scaleImage : true,

• fixedHeight : true,

• background: "#222222",

• imageVerticalAlign : 'middle',

• jsOnly : false  

PREVIOUS:
NEXT:
单页多用途 HTML5模板
超炫酷的CSS3进度条动画 背景色渐变