@fengyuanchen/slider

Slider

A simple jQuery slide plugin.

• Demo

Table of contents

• Main
• Getting started
• Options
• Methods
• No conflict
• Browser support
• Versioning
• License

Main

dist/
├── slider.js     (9 KB)
└── slider.min.js (6 KB)

Getting started

Quick start

Three quick start options are available:

• Download the latest release.
• Clone the repository: git clone https://github.com/fengyuanchen/slider.git.
• Install with NPM: npm install @fengyuanchen/slider.

Installation

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/slider.js"></script>

Usage

Initialize with $.fn.slider method.

$('#slider').slider({
  activeClass: 'slider-active', // for slide nav
  autoPlay: true,
  contentClass: 'slider-content',
  disableClass: 'slider-disabled', // for slide "prev" and "next" button
  duration: 5000,
  effect: 'fade',
  easing: 'swing', // support "swing" and "linear", powered by jQuery
  navClass: 'slider-nav',
  nextClass: 'slider-next',
  prevClass: 'slider-prev',
  speed: 1000,
  trigger: 'click' // for slide nav
});

⬆ back to top

Options

// Set slider options
$().slider(options);

// Set the global default options
$.fn.slider.setDefaults(options);

activeClass

• Type: String
• Default: 'slider-active'

An active state class for nav items.

autoPlay

• Type: Boolean
• Default: true

Auto play the slide after initialized.

contentClass

• Type: String
• Default: 'slider-content'

The content container.

disableClass

• Type: String
• Default: 'slider-disabled'

A disable state class for previous and next button.

duration

• Type: Number
• Default: 5000

The duration milliseconds of each slide item.

effect

• Type: String
• Options: 'fade', 'scrollX', 'scrollY'
• Default: 'fade'

easing

• Type: String
• Options: 'swing', 'linear'
• Default: 'swing'

Powered by jQuery.

navClass

• Type: String
• Default: 'slider-nav'

The navigation container.

prevClass

• Type: String
• Default: 'slider-prev'

The previous button.

nextClass

• Type: String
• Default: 'slider-next'

The next button.

speed

• Type: Number
• Default: 1000

The speed of the animation.

trigger

• Type: String
• Default: 'click'

The event for triggering slide.

⬆ back to top

Methods

render()

Render the slider.

start()

Start the slider.

$().slider({
  autoPlay: false
}).slider('start');

stop()

stop the slider.

enable()

Enable the slider.

disable()

Disable the slider.

destroy()

Destroy the slider.

⬆ back to top

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.slider.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="slider.js"></script>
<script>
  $.fn.slider.noConflict();
  // Code that uses other plugin's "$().slider" can follow here.
</script>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 8+

As a jQuery plugin, you also need to see the jQuery Browser Support.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Fengyuan Chen

⬆ back to top