https://github.com/kdydesign/jqk-slider
jQuery simple image slider
https://github.com/kdydesign/jqk-slider
image image-slider jquery jquery-plugin slider slider-plugin slideshow
Last synced: 2 months ago
JSON representation
jQuery simple image slider
- Host: GitHub
- URL: https://github.com/kdydesign/jqk-slider
- Owner: kdydesign
- License: mit
- Created: 2016-03-02T07:25:49.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-06-28T08:13:13.000Z (about 9 years ago)
- Last Synced: 2025-03-25T03:03:53.435Z (over 1 year ago)
- Topics: image, image-slider, jquery, jquery-plugin, slider, slider-plugin, slideshow
- Language: JavaScript
- Homepage:
- Size: 5.16 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/kdydesign/jqk-slider)
# jqk-Slider by kdydesign.
Simple jQuery Slider by kdydesign.(Dev.dy)
# Demo
JSFiddle Demo
# Basic Usage
To add this to your website, simply include the latest jQuery library together with jquery.jqk-slider.js, and jqk-slider.css, and image resources into your document's and create an HTML markup as follows:
```html
```
And simply call the script like this:
```javascript
var slider =
$("#jqk-slider").jqkSlider({
width: "100%",
height: 500,
dottedNav: {
use: true
},
arrowNav: {
use: true
},
slideSpeed: 5000,
effectSpeed: 300,
items: [
{
title: 'Slider Title-1',
img: 'img/demo-img1.jpg'
},
{
title: 'Slider Title-2',
img: 'img/demo-img1.jpg'
},
{
title: 'Slider Title-3',
img: 'img/demo-img1.jpg'
}
]
});
```
# Options
```javascript
$("#jqk-slider").jqkSlider("option", "width", "100%");
```
# Public Methods
`jqkSlider` methods could be called with jqkSlider `jqkSlider` plugin or directly.
To use `jqkSlider` plugin to call a method, just call `jqkSlider` with method name and required parameters as next arguments:
```javascript
// calling method with jQuery plugin
$("#jqk-slider").jqkSlider("methodName");
```
To call method directly you need to retrieve slider instance or just create slider with the constructor:
```javascript
// retrieve slider instance from element data
var slider = $("#jqk-slider").data("jqkSlider");
```
```javascript
// create slider with the constructor
var slider = new jqkSlider.Slider($("#jqk-slider"), { ... });
```
```javascript
// call method directly
slider.methodName(param1, param2);
```
You can also trigger the slider to move programmatically as well:
## slideStop
This method allows you to stop the slider.
```javascript
$("#jqk-slider").slideStop();
```
## slideStart
This method allows you to start the slider.
```javascript
$("#jqk-slider").slideStart();
```
## destroy()
Destroys the slider
```javascript
$("#jqk-slider").jqkSlider('destroy')
```
## addSlide([items])
add slide items
```javascript
$("#jqk-slider").jqkSlider('addSlide', {img:'test.png'})
```
## removeSlide([index])
remote slide items
```javascript
$("#jqk-slider").jqkSlider('removeSlide', 1)
```
## setSlideSpeed(speed[ms])
set slide speed
```javascript
$("#jqk-slider").jqkSlider('setSlideSpeed', 2000)
```
## setEffectSpeed(speed[ms])
set slide effect speed
```javascript
$("#jqk-slider").jqkSlider('setEffectSpeed', 2000)
```
# Version
> Feb 29 2016 (1.0.0)
> Jun 23 2017 (1.1.0.1)