本文目录

插件 jQuery.Excolo Slider 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Excolo Slider 中文API文档 https://github.com/Excolo/Excolo-Slider Excolo Slider

A simple jquery sliding plugin, supporting responsive design, keyboard and touch navigation.

Under development. I’ll post future features and enhancements, in the issue tracker.

Should you find bugs or want to suggest a feature, feel free to post it in an issue. :-)

Features:

  • AutoPlay Slideshow
  • Mouse slide navigation
  • Prev/next button navigation
  • HTML5 data-attribute captions
  • Pagination
  • Repeat when last slide is reached
  • Play the slideshow backwards
  • Auto adjust size initially and on browser resize, for responsive designs
  • Touch enabled (limited to a few browsers)

Most of these features can be configured and turned off, when setting up the slider.

Installation

Installation can be done using NuGet Package Manager, either by using the console, as seen below, or by searching for the package in the Visual Studio package explorer:

PM> Install-Package excolo-slider

Then in the header of your website, you insert the references to jquery and the slider plugin:

<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.excoloSlider.min.js"></script>
<link href="Content/jquery.excoloSlider.css" rel="stylesheet">

The HTML code for the slides is simply a div container, with any child objects being the slides:

<div id="slider">
  <img src="images/image1.jpg" />
  <img src="images/image2.jpg" />
  <img src="images/image3.jpg" />
  <img src="images/image4.jpg" 
    data-plugin-slide-caption="I am a caption <b>and I can contain HTML.</b>" />
  <img src="images/image5.jpg" />
  <img src="images/image6.jpg" />
  <img src="images/image7.jpg" />
  <div>
    <h2>This is the last slide</h2>
    <img style="width: 50%: float: right;" src="images/image8.jpg" />
  </div>
</div>

Notice how you can use the HTML5 data-attribute data-plugin-slide-caption to create a caption text for each slide. These captions allow HTML and can be fully styled using css.

Then to initialize the slider plugin with default settings you insert the script:

$(function () {
    $("#slider").excoloSlider();
});

For installation without NuGet see our GitHub page

Configuration

Configuration can be seen on our GitHub page

Examples

Examples can be seen on our GitHub page

Relative Project

License

Free for both personal and commercial use.

Copyright (c) 2013 Nikolaj Dam Larsen. Released under the MIT license.

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了