Download Generic Cross-browser Slideshow Plugin With jQuery – KinSlideshow

This time I will share jQuery Plugin and tutorial about Generic Cross-browser Slideshow Plugin With jQuery – KinSlideshow, hope it will help you in programming stack.

File Size:	14.4 KB
Views Total:	1230
Last Update:	5 years ago
Publish Date:	5 years ago
Official Website:	Go to website
License:	MIT

Demo Download

KinSlideshow is a pretty simple, fully configurable jQuery plugin which helps you create an automatic slideshow for presenting your popular images/posts on the webpage.

Features:

No CSS required.
Works on any modern browsers.
Auto rotation like a carousel.
Auto caption bar that loads content from img‘s alt attribute.
Allows to slide between images on click or hover.
Custom pagination.

How to use it:

1. First you need to load jQuery library and the JavaScript file jquery.KinSlideshow.min.js in the webpage.

`1`	`<script` `src="//code.jquery.com/jquery-1.12.0.min.js"></script>`

`2`	`<script` `src="js/jquery.KinSlideshow-1.2.1.min.js"></script>`

2. Add a group of images into a container element. Note that the wrapping element must have a ‘visibility:hidden;’ CSS property.

1
<div id="KinSlideshow" style="visibility:hidden;">

2
  <a href="#"><img src="1.jpg" alt="Alt 1"></a>

3
  <a href="#"><img src="2.jpg" alt="Alt 2"></a>

4
  <a href="#"><img src="3.jpg" alt="Alt 3"></a>

5
  <a href="#"><img src="4.jpg" alt="Alt 4"></a>

6
  <a href="#"><img src="5.jpg" alt="Alt 5"></a>

7
  ...

8
</div>

3. Initialize the slideshow with all default options.

`1`	`$("#KinSlideshow").KinSlideshow();`

4. Config your slideshow with the following options.

01
$("#KinSlideshow").KinSlideshow({

02
 
03
  // transition delay in seconds

04
  intervalTime: 5,

05
 
06
  // animation speed in ms

07
  moveSpeedTime: 400,

08
 
09
  //  left | right | up | down

10
  moveStyle: "left",

11
 
12
  // mouseclick | mouseover

13
  mouseEvent: "mouseclick",

14
 
15
  // displays caption bar

16
  isHasTitleBar: true,

17
 
18
  // caption bar's styles

19
  titleBar: {

20
    titleBar_height: 40, 

21
    titleBar_bgColor: "#000000", 

22
    titleBar_alpha: 0.5

23
  },

24
 
25
  // displays image titles

26
  isHasTitleFont: true,

27
 
28
  // image title's styles

29
  titleFont: {

30
    TitleFont_size: 12, 

31
    TitleFont_color: "#FFFFFF", 

32
    TitleFont_family: "Verdana", 

33
    TitleFont_weight: "bold"

34
  },

35
 
36
  // displays pagination

37
  isHasBtn: true,

38
 
39
  // pagination styles

40
  btn: {

41
    btn_bgColor: "#666666",

42
    btn_bgHoverColor: "#CC0000",

43
    btn_fontColor: "#CCCCCC",

44
    btn_fontHoverColor: "#000000",

45
    btn_fontFamily: "Verdana",

46
    btn_borderColor: "#999999",

47
    btn_borderHoverColor: "#FF0000",

48
    btn_borderWidth: 1,

49
    btn_bgAlpha: 0.7

50
  }

51
   
52
});