Loading content... Please wait...
ArtDesignSlider
Instalation
Examples
Documentation
Releases

ArtDesignSlider(v2.0.0)

jQuery responsive image slider with support auto resize images with different dimension

EXAMPLE:

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5


DESCRIPTION:

ArtDesignSlider is a jQuery images slider PlugIn

Support    * and all major browsers (Safari etc)

Responsive - resize browser () to view effect

Support pixels (px) and percents (%) for width and height

Support full width and full height - 100%

Class prefix to prevent conflict with classes from other CSS files

Full style control with JS - no need CSS: width, height, border, icons, colors etc

Full navigation control

Full control of the position of all elements

Support images with different dimensions

Automatic resizing and centering of images

Keys press listening ( And )

Mouse wheel listening ()

External functions (Go To Previous, Go To Next, Go To)

24 Transition effects

Multiple instances

*Limited support for IE 7 and IE 8 (border radius)
Download
- or view this project on GitHub
Also support install with bower and npm:
bower install artdesign-slider
npm install artdesign-slider
- and Donate -
- or Share -
WE ARE
and can help you if you need a
WebSite Design PHP Code jQuery Code
- or -

EXAMPLE:

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5





ArtDesignSlider

ArtDesignSlider - Installation

LOAD FILES:

First method

Define a required files in file Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js .

window.ArtDesignFilesLoader.RequiredResources([
    "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css",
    "JavaScript/Browser/Browser.js",
    "JavaScript/ColorAnimation/ColorAnimation.js",
    "JavaScript/Easing/Easing.js",
    "JavaScript/MouseWheel/MouseWheel.js",
    "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js",
    "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js",
    "JavaScript/ArtDesign/ArtDesignSlider/ArtDesignSlider.js"
]);

Load Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/ with param BasePath were BasePath is path to folder with required files.

<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/"></script>

Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js automatically load all a necessary files to run a PlugIn.

Then initialize a PlugIn with function window.ArtDesignFilesLoader.Ready().

window.ArtDesignFilesLoader.Ready(function() {
    $("#ArtDesignSlider").ArtDesignSlider();
});

Second method

Load all a necessary files to run PlugIn.

<link rel="stylesheet" href="Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css">
<script type="text/javascript" src="Resources/JavaScript/jQuery/jQuery.js"></script>
<script type="text/javascript" src="Resources/JavaScript/Browser/Browser.js"></script>
<script type="text/javascript" src="Resources/JavaScript/ColorAnimation/ColorAnimation.js"></script>
<script type="text/javascript" src="Resources/JavaScript/Easing/Easing.js"></script>
<script type="text/javascript" src="Resources/JavaScript/MouseWheel/MouseWheel.js"></script>
<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js"></script>
<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js"></script>
<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignSlider/ArtDesignSlider.js"></script>

Then initialize a PlugIn.

$(document).ready(function() {
    $("#ArtDesignSlider").ArtDesignSlider();
});

SETUP WEB ELEMENTS:

ArtDesignSlider

Create <div> > <ul> > <li> > <img>.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="ArtDesignSliderImages/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>

ArtDesignSlider - Examples

ArtDesignSlider - Base instalation

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider();

ArtDesignSlider - External Functions (Prev, Next, Go To)

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with variable.

Initialize external functions.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
var ArtDesignSlider = $("#ArtDesignSlider").ArtDesignSlider();
//or
window.ArtDesignSlider = $("#ArtDesignSlider").ArtDesignSlider();
function Prev() {
    ArtDesignSlider.GoToPrev();
    //or
    window.ArtDesignSlider.GoToPrev();
}
function Next() {
    ArtDesignSlider.GoToPrev();
    //or
    window.ArtDesignSlider.GoToNext();
}
function GoTo() {
    ArtDesignSlider.GoTo(4);
    //or
    window.ArtDesignSlider.GoTo(4);
}

ArtDesignSlider with custom positions of controllers

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with custom settings.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider({
    TimerPositionHorizontal: "Center",
    PrevIconPositionVertical: "Bottom",
    NextIconPositionVertical: "Bottom",
    NavigationPositionHorizontal: "Left",
    NavigationMarginHorizontal: 70
});

ArtDesignSlider with custom width (400px) and custom height (200px)

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with custom settings.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider({
    SliderWidth: 400,
    SliderWidthUnit: "px",
    SliderHeight: 200,
    SliderHeightUnit: "px"
});

ArtDesignSlider with custom width (400px), custom height (200px) and left float

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with custom settings.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider({
    Position: "Left",
    SliderWidth: 400,
    SliderWidthUnit: "px",
    SliderHeight: 200,
    SliderHeightUnit: "px"
});

ArtDesignSlider with custom width (400px), custom height (200px) and right float

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with custom settings.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider({
    Position: "Right",
    SliderWidth: 400,
    SliderWidthUnit: "px",
    SliderHeight: 200,
    SliderHeightUnit: "px"
});

ArtDesignSlider with custom colors

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with custom settings.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider({
    SpaceColor: "#FB5162",
    NavigationIconColorNormal: "#FB5162",
    NavigationIconColorHover: "#FB5162",
    NavigationIconColorClick: "#FB5162",
    PrevIconColorNormal: "#FB5162",
    PrevIconColorHover: "#FB5162",
    PrevIconColorClick: "#FB5162",
    NextIconColorNormal: "#FB5162",
    NextIconColorHover: "#FB5162",
    NextIconColorClick: "#FB5162",
    TimerColorActive: "#FB5162"
});

ArtDesignSlider without auto start and custom start image (3)

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with custom settings.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider({
    StartImage: 3,
    AutoStart: false
});

ArtDesignSlider with full width (100%) and full height (100%)

Create <div> > <ul> > <li> > <img>.

Initialize ArtDesignSlider with custom settings.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="path/to/images/folder/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="path/to/images/folder/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="path/to/images/folder/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="path/to/images/folder/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="path/to/images/folder/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>
$("#ArtDesignSlider").ArtDesignSlider({
    SliderWidth: 100,
    SliderWidthUnit: "%",
    SliderHeight: 100,
    SliderHeightUnit: "%",
    SpaceTop: 0,
    SpaceBottom: 0,
    SpaceLeft: 0,
    SpaceRight: 0,
    SpaceRadiusTopLeft: 0,
    SpaceRadiusBottomLeft: 0,
    SpaceRadiusTopRight: 0,
    SpaceRadiusBottomRight: 0,
    SpaceBorderSize: 0
});
For all options see Full Documentation

ArtDesignSlider - Documentation

LICENSES:

ArtDesignSlider is under ArtDesignCreative License
ArtDesignSlider is based on jQuery
ArtDesignSlider use external PlugIns:
1. ArtDesignIcons (ArtDesignCreative License)
2. Browser (based on Bowser)
3. ColorAnimation (MIT and GPL License)
4. Easing
5. MouseWheel (License)

FILES STRUCTURE:

  • Resources
    • JavaScript
      • ArtDesign
        • ArtDesignFilesLoader
          • ArtDesignFilesLoader.js
        • ArtDesignIcons
          • Fonts
            • ArtDesignIcons.eot
            • ArtDesignIcons.svg
            • ArtDesignIcons.ttf
            • ArtDesignIcons.woff
          • ArtDesignIcons.css
          • ArtDesignIcons.js
          • ArtDesignIconsCode.js
        • ArtDesignSlider
          • ArtDesignSlider.js
      • Browser
        • Browser.js
      • ColorAnimation
        • ColorAnimation.js
      • Easing
        • Easing.js
      • jQuery
        • jQuery.js
      • MouseWheel
        • MouseWheel.js

BASE SETTINGS

ClassPrefix

Name: ClassPrefix
Allowed: string
Default: "Sl_"
ClassPrefix: "Sl_"

StartImage

Name: StartImage
Allowed: integer
Default: 1
StartImage: 1

Repeat

Name: Repeat
Allowed: true, false
Default: false
Repeat: false

StartZIndex

Name: StartZIndex
Allowed: integer
Default: 100
StartZIndex: 100

Position

Name: Position
Allowed: "Center", "Left", "Right"
Default: "Center"
Position: "Center"

MarginTop

Name: MarginTop
Allowed: integer
Default: 0
MarginTop: 0

MarginBottom

Name: MarginBottom
Allowed: integer
Default: 0
MarginBottom: 0

MarginLeft

Name: MarginLeft
Allowed: integer
Default: 0
MarginLeft: 0

MarginRight

Name: MarginRight
Allowed: integer
Default: 0
MarginRight: 0

SliderWidth

Name: SliderWidth
Allowed: integer
Default: 1200
SliderWidth: 1200

SliderWidthUnit

Name: SliderWidthUnit
Allowed: "px", "%"
Default: "px"
SliderWidthUnit: "px"

SliderHeight

Name: SliderHeight
Allowed: integer
Default: 400
SliderHeight: 400

SliderHeightUnit

Name: SliderHeightUnit
Allowed: "px", "%"
Default: "px"
SliderHeightUnit: "px"

SliderHeightConstant

Name: SliderHeightConstant
Allowed: true, false
Default: false
SliderHeightConstant: false

HideControls

Name: HideControls
Allowed: true, false
Default: false
HideControls: false

HideControlsAfter

Name: HideControlsAfter
Allowed: integer
Default: 3000
HideControlsAfter: 3000

ElementPreventMouseWheel

Name: ElementPreventMouseWheel
Allowed: string
Default: "body"
ElementPreventMouseWheel: "body"

AutoStart

Name: AutoStart
Allowed: true, false
Default: true
AutoStart: true

AutoStartInitializeDelay

Name: AutoStartInitializeDelay
Allowed: integer
Default: 1000
AutoStartInitializeDelay: 1000

NextDelay

Name: NextDelay
Allowed: integer
Default: 10000
NextDelay: 10000

FadeSpeed

Name: FadeSpeed
Allowed: integer
Default: 250
FadeSpeed: 250

TIMER

Timer

Name: Timer
Allowed: true, false
Default: true
Timer: true

TimerWidth

Name: TimerWidth
Allowed: integer
Default: 35
TimerWidth: 35

TimerWidthUnit

Name: TimerWidthUnit
Allowed: "px", "%"
Default: "%"
TimerWidthUnit: "%"

TimerHeight

Name: TimerHeight
Allowed: integer
Default: 6
TimerHeight: 6

TimerColor

Name: TimerColor
Allowed: HEX
Default: "#FFFFFF"
TimerColor: "#FFFFFF"

TimerOpacity

Name: TimerOpacity
Allowed: float
Default: 0.2
TimerOpacity: 0.2

TimerBorderWidth

Name: TimerBorderWidth
Allowed: integer
Default: 2
TimerBorderWidth: 2

TimerBorderRadius

Name: TimerBorderRadius
Allowed: integer
Default: 4
TimerBorderRadius: 4

TimerColorActive

Name: TimerColorActive
Allowed: HEX
Default: "#FFFFFF"
TimerColorActive: "#FFFFFF"

TimerOpacityActive

Name: TimerOpacityActive
Allowed: float
Default: 0.8
TimerOpacityActive: 0.8

TimerPaddingActive

Name: TimerPaddingActive
Allowed: integer
Default: 2
TimerPaddingActive: 2

TimerPositionHorizontal

Name: TimerPositionHorizontal
Allowed: "Center", "Left", "Right"
Default: "Right"
TimerPositionHorizontal: "Right"

TimerPositionVertical

Name: TimerPositionVertical
Allowed: "Center", "Top", "Bottom"
Default: "Top"
TimerPositionVertical: "Top"

TimerMarginTop

Name: TimerMarginTop
Allowed: integer
Default: 10
TimerMarginTop: 15

TimerMarginBottom

Name: TimerMarginBottom
Allowed: integer
Default: 10
TimerMarginBottom: 15

TimerMarginLeft

Name: TimerMarginLeft
Allowed: integer
Default: 10
TimerMarginLeft: 20

TimerMarginRight

Name: TimerMarginRight
Allowed: integer
Default: 10
TimerMarginRight: 20

SPACER

SpaceColor

Name: SpaceColor
Allowed: HEX
Default: "#FFFFFF"
SpaceColor: "#FFFFFF"

SpaceTop

Name: SpaceTop
Allowed: integer
Default: 10
SpaceTop: 10

SpaceBottom

Name: SpaceBottom
Allowed: integer
Default: 10
SpaceBottom: 10

SpaceLeft

Name: SpaceLeft
Allowed: integer
Default: 10
SpaceLeft: 10

SpaceRight

Name: SpaceRight
Allowed: integer
Default: 10
SpaceRight: 10

SpaceRadiusTopLeft

Name: SpaceRadiusTopLeft
Allowed: integer
Default: 6
SpaceRadiusTopLeft: 6

SpaceRadiusBottomLeft

Name: SpaceRadiusBottomLeft
Allowed: integer
Default: 6
SpaceRadiusBottomLeft: 6

SpaceRadiusTopRight

Name: SpaceRadiusTopRight
Allowed: integer
Default: 6
SpaceRadiusTopRight: 6

SpaceRadiusBottomRight

Name: SpaceRadiusBottomRight
Allowed: integer
Default: 6
SpaceRadiusBottomRight: 6

SpaceBorderType

Name: SpaceBorderType
Allowed: "solid", "dotted", "dashed"
Default: "solid"
SpaceBorderType: "solid"

SpaceBorderSize

Name: SpaceBorderSize
Allowed: integer
Default: 1
SpaceBorderSize: 1

SpaceBorderColor

Name: SpaceBorderColor
Allowed: HEX
Default: "#CCCCCC"
SpaceBorderColor: "#CCCCCC"

NAVIGATION

Navigation

Name: Navigation
Allowed: true, false
Default: true
Navigation: true

NavigationPositionVertical

Name: NavigationPositionVertical
Allowed: "Center", "Top", "Bottom"
Default: "Bottom"
NavigationPositionVertical: "Bottom"

NavigationPositionHorizontal

Name: NavigationPositionHorizontal
Allowed: "Center", "Left", "Right"
Default: "Center"
NavigationPositionHorizontal: "Center"

NavigationHorizontal

Name: NavigationHorizontal
Allowed: integer
Default: -35
NavigationHorizontal: -35

NavigationVertical

Name: NavigationVertical
Allowed: integer
Default: 10
NavigationVertical: 10

NavigationIcon

Name: NavigationIcon
Allowed: string
Default: "icon-circle-empty"
NavigationIcon: "icon-circle-empty"

NavigationIconSpace

Name: NavigationIconSpace
Allowed: integer
Default: 1
NavigationIconSpace: 1

NavigationIconSize

Name: NavigationIconSize
Allowed: integer
Default: 16
NavigationIconSize: 16

NavigationIconOpacityNormal

Name: NavigationIconOpacityNormal
Allowed: float
Default: 0.7
NavigationIconOpacityNormal: 0.7

NavigationIconOpacityHover

Name: NavigationIconOpacityHover
Allowed: float
Default: 1
NavigationIconOpacityHover: 1

NavigationIconOpacityClick

Name: NavigationIconOpacityClick
Allowed: float
Default: 1
NavigationIconOpacityClick: 1

NavigationIconColorNormal

Name: NavigationIconColorNormal
Allowed: HEX
Default: "#FFFFFF"
NavigationIconColorNormal: "#FFFFFF"

NavigationIconColorHover

Name: NavigationIconColorHover
Allowed: HEX
Default: "#FFFFFF"
NavigationIconColorHover: "#FFFFFF"

NavigationIconColorClick

Name: NavigationIconColorClick
Allowed: HEX
Default: "#FFFFFF"
NavigationIconColorClick: "#FFFFFF"

NavigationAutoStartIcon

Name: NavigationAutoStartIcon
Allowed: string
Default: "icon-play-circled-1"
NavigationAutoStartIcon: "icon-play-circled-1"

NavigationAutoStopIcon

Name: NavigationAutoStopIcon
Allowed: string
Default: "icon-stop-circled"
NavigationAutoStopIcon: "icon-stop-circled"

PREV NEXT

PrevNext

Name: PrevNext
Allowed: true, false
Default: true
PrevNext: true

PrevNextPosition

Name: PrevNextPosition
Allowed: Top, Middle, Bottom
Default: Middle
PrevNextPosition: Middle

PrevNextHorizontal

Name: PrevNextHorizontal
Allowed: integer
Default: 10
PrevNextHorizontal: 10

PrevNextVertical

Name: PrevNextVertical
Allowed: integer
Default: 0
PrevNextVertical: 0

PREV

PrevIcon

Name: PrevIcon
Allowed: string
Default: "icon-angle-circled-left"
PrevIcon: "icon-angle-circled-left"

PrevIconSize

Name: PrevIconSize
Allowed: integer
Default: 40
PrevIconSize: 40

PrevIconOpacityNormal

Name: PrevIconOpacityNormal
Allowed: float
Default: 0.7
PrevIconOpacityNormal: 0.7

PrevIconOpacityHover

Name: PrevIconOpacityHover
Allowed: float
Default: 1
PrevIconOpacityHover: 1

PrevIconOpacityClick

Name: PrevIconOpacityClick
Allowed: float
Default: 1
PrevIconOpacityClick: 1

PrevIconColorNormal

Name: PrevIconColorNormal
Allowed: HEX
Default: "#FFFFFF"
PrevIconColorNormal: "#FFFFFF"

PrevIconColorHover

Name: PrevIconColorHover
Allowed: HEX
Default: "#FFFFFF"
PrevIconColorHover: "#FFFFFF"

PrevIconColorClick

Name: PrevIconColorClick
Allowed: HEX
Default: "#FFFFFF"
PrevIconColorClick: "#FFFFFF"

NEXT

NextIcon

Name: NextIcon
Allowed: string
Default: "icon-angle-circled-right"
        NextIcon: "icon-angle-circled-right"

NextIconSize

Name: NextIconSize
Allowed: integer
Default: 40
NextIconSize: 40

NextIconOpacityNormal

Name: NextIconOpacityNormal
Allowed: float
Default: 0.7
NextIconOpacityNormal: 0.7

NextIconOpacityHover

Name: NextIconOpacityHover
Allowed: float
Default: 1
NextIconOpacityHover: 1

NextIconOpacityClick

Name: NextIconOpacityClick
Allowed: float
Default: 1
NextIconOpacityClick: 1

NextIconColorNormal

Name: NextIconColorNormal
Allowed: HEX
Default: "#FFFFFF"
NextIconColorNormal: "#FFFFFF"

NextIconColorHover

Name: NextIconColorHover
Allowed: HEX
Default: "#FFFFFF"
NextIconColorHover: "#FFFFFF"

NextIconColorClick

Name: NextIconColorClick
Allowed: HEX
Default: "#FFFFFF"
NextIconColorClick: "#FFFFFF"

ArtDesignSlider - Releases

11.01.2015 - v2.0.0