Loading, please wait...

ARTDESIGN SLIDER

SETTINGS

Attributes

data-plugin-ad-slider="ad-slider"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-slider="ad-slider">
    <ul>
        <li>
            <img src="Path/To/Images/Slider/1.jpg" alt="Image 1">
        </li>
        <li>
            <img src="Path/To/Images/Slider/2.jpg" alt="Image 2">
        </li>
        <li>
            <img src="Path/To/Images/Slider/3.jpg" alt="Image 3">
        </li>
        <li>
            <img src="Path/To/Images/Slider/4.jpg" alt="Image 4">
        </li>
        <li>
            <img src="Path/To/Images/Slider/5.jpg" alt="Image 5">
        </li>
    </ul>
</div>

data-ad-slider-options="Red, WithOutBody"

This attribute overwrites the settings of the plugin
<div data-plugin-ad-slider="ad-slider" data-ad-slider-options="Red, WithOutBody">
    <ul>
        <li>
            <img src="Path/To/Images/Slider/1.jpg" alt="Image 1">
        </li>
        <li>
            <img src="Path/To/Images/Slider/2.jpg" alt="Image 2">
        </li>
        <li>
            <img src="Path/To/Images/Slider/3.jpg" alt="Image 3">
        </li>
        <li>
            <img src="Path/To/Images/Slider/4.jpg" alt="Image 4">
        </li>
        <li>
            <img src="Path/To/Images/Slider/5.jpg" alt="Image 5">
        </li>
    </ul>
</div>

data-ad-slider-animation-effect="Fade"

This attribute specifies a transition effect for a specific image
<div data-plugin-ad-slider="ad-slider">
    <ul>
        <li>
            <img src="Path/To/Images/Slider/1.jpg" alt="Image 1">
        </li>
        <li>
            <img src="Path/To/Images/Slider/2.jpg" alt="Image 2">
        </li>
        <li>
            <img src="Path/To/Images/Slider/3.jpg" alt="Image 3">
        </li>
        <li data-ad-slider-animation-effect="Fade">
            <img src="Path/To/Images/Slider/4.jpg" alt="Image 4">
        </li>
        <li>
            <img src="Path/To/Images/Slider/5.jpg" alt="Image 5">
        </li>
    </ul>
</div>

Public Methods

Destroy

<script type="text/javascript">
    var Slider = $(".ArtDesign").ArtDesignSlider();
    Slider.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "Sl_" // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "Sl_"
    },
    Global: { // Global settings of the element
        ClassPrefix: "Sl_", // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "Sl_"
        Width: 1200, // Set the Width; Must be string (px, %, auto); By default: 1200
        WidthUnit: "px", // Set the WidthUnit; Must be string (px, %, auto); By default: "px"
        Height: 500, // Set the Height; Must be string (px, %, auto); By default: 500
        HeightUnit: "px", // Set the HeightUnit; Must be string (px, %, auto); By default: "px"
        HeightConstant: false, // If it is true it sets height constant; Must be boolean; By default: false
        ParentElementToResize: "body", // Specifies the element to which the image is resized; Must be string; By default: "body"
        ZIndex: 1, // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 1
        StartImage: 1, // Set the StartImage; Must be integer; By default: 1
        AnimationHoverSpeed: 0.3, // Set the AnimationSpeed; Must be decimal; By default: 0.4
        ListenKeysPress: true, // If it is true it listen for key press; Must be boolean; By default: true
        ListenMouseWheel: true, // If it is true it listen for mouse wheel; Must be boolean; By default: true
        Loop: true, // If it is true it loops the images from the last one to the first one; Must be boolean; By default: true
        AutoPlay: false, // If it is true it set auto play; Must be boolean; By default: false
        AutoPlayInterval: 5000 // Set auto play interval at milliseconds; Must be integer; By default: 5000
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    Body: { // Settings for the Body
        CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
            "background": "#FFFFFF",
            "border": "0px solid #6488AA",
            "borderRadius": "12px",
            "boxShadow": "inset 0px 0px 10px 0px rgba(82, 112, 140, 0.6)"
        }
    },
    ImageContent: { // Settings for the ImageContent
        Border: "1px solid #8CA6C0", // Set style and color of the border; Must be string; By default: "1px solid #8CA6C0"
        Padding: { // Padding settings
            Top: "10px", // Set the padding top of the element; Must be string (px, %, auto); By default: "10px"
            Bottom: "10px", // Set the padding bottom of the element; Must be string (px, %, auto); By default: "10px"
            Left: "10px", // Set the padding left of the element; Must be string (px, %, auto); By default: "10px"
            Right: "10px" // Set the padding right of the element; Must be string (px, %, auto); By default: "10px"
        }
    },
    PrevNext: { // Settings for the PrevNext
        PrevNext: true, // If it is true, it sets the following settings for PrevNext; Must be boolean; By default: true
        Prev: { // Settings for Prev
            Icon: "icon-angle-circled-left", // Set the Icon from the ArtDesignIcons PlugIn; Must be string; By default: "icon-angle-circled-left"
            Position: "middle", // Set position of the element; Must be string; By default: "middle"
            CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
                "position": "absolute",
                "zIndex": 10,
                "color": "#FFFFFF",
                "fontSize": "34px",
                "marginTop": "-18px",
                "marginLeft": "30px",
                "cursor": "pointer"
            },
            Color: { // Color settings
                Normal: "#FFFFFF", // Normal color; By default: "#FFFFFF"
                Hover: "#6488AA", // Hover color without gradient; By default: "#6488AA"
                Click: "#6488AA" // Click color; By default: "#6488AA"
            }
        },
        Next: { // Settings for Next
            Icon: "icon-angle-circled-right", // Set the Icon from the ArtDesignIcons PlugIn; Must be string; By default: "icon-angle-circled-right"
            Position: "middle", // Set position of the element; Must be string; By default: "middle"
            CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
                "position": "absolute",
                "zIndex": 10,
                "color": "#FFFFFF",
                "fontSize": "34px",
                "marginTop": "-18px",
                "marginLeft": "-58px",
                "cursor": "pointer"
            },
            Color: { // Color settings
                Normal: "#FFFFFF", // Normal color; By default: "#FFFFFF"
                Hover: "#6488AA", // Hover color without gradient; By default: "#6488AA"
                Click: "#6488AA" // Click color; By default: "#6488AA"
            }
        }
    },
    Navigation: { // Settings for the Navigation
        Navigation: true, // If it is true, it sets the following settings for Navigation; Must be boolean; By default: true
        Position: "BottomCenter", // Set position of the element; Must be string; By default: "BottomCenter"
        CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
            "borderCollapse": "separate",
            "border": "0px",
            "backgroundColor": "#FFFFFF",
            "position": "absolute",
            "marginTop": "-60px",
            "left": "50%",
            "transform": "translate(-50%, -50%)",
            "borderRadius": "30px",
            "zIndex": 10
        },
        Buttons: { // Settings for Buttons
            Buttons: true, // If it is true, it sets the following settings for Buttons; Must be boolean; By default: true
            CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
                "padding": "2px 6px 2px 2px"
            },
            Icons: {
                Icon: "icon-circle", // Set the Icon from the ArtDesignIcons PlugIn; Must be string; By default: "icon-circle"
                CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
                    "lineHeight": "1.3em",
                    "color": "#8CA6C0",
                    "fontSize": "16px",
                    "marginLeft": "2px",
                    "marginRight": "2px",
                    "cursor": "pointer"
                },
                Color: { // Color settings
                    Normal: "#8CA6C0", // Normal color; By default: "#8CA6C0"
                    Hover: "#6488AA", // Hover color without gradient; By default: "#6488AA"
                    Click: "#6488AA" // Click color; By default: "#6488AA"
                }
            }
        },
        PlayPause: { // Settings for PlayPause
            PlayPause: true, // If it is true, it sets the following settings for PlayPause; Must be boolean; By default: true
            CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
                "padding": "4px 0px 4px 6px"
            },
            Icon: { // Settings for Icon
                IconPlay: "icon-play-circled-1",
                IconPause: "icon-pause-circled",
                CSS: { // Set all setting as a CSS block, can be added more setting such as attributes
                    "color": "#8CA6C0",
                    "fontSize": "20px",
                    "marginLeft": "2px",
                    "marginRight": "2px",
                    "cursor": "pointer"
                },
                Color: { // Color settings
                    Normal: "#8CA6C0", // Normal color; By default: "#8CA6C0"
                    Hover: "#6488AA", // Hover color without gradient; By default: "#6488AA"
                    Click: "#6488AA" // Click color; By default: "#6488AA"
                }
            }
        }
    },
    AnimationEffects: [ // Settings for the Animation Effects
        {
            Name: "Fade",
            Speed: 1.5
        }, {
            Name: "KenBurnsScaleMinus",
            Speed: 2.5,
            ScaleFrom: 1.1
        }, {
            Name: "KenBurnsScalePlus",
            Speed: 2.5,
            ScaleTo: 1.1
        }, {
            Name: "BlindsTopBottom",
            Speed: 0.8,
            Blinds: 10,
            Delay: 0.06
        }, {
            Name: "BlindsBottomTop",
            Speed: 0.8,
            Blinds: 10,
            Delay: 0.06
        }, {
            Name: "BlindsLeftRight",
            Speed: 0.8,
            Blinds: 16,
            Delay: 0.07
        }, {
            Name: "BlindsRightLeft",
            Speed: 0.8,
            Blinds: 16,
            Delay: 0.07
        }, {
            Name: "BoxFadeInLeftRight",
            Speed: 0.8,
            Delay: 0.07,
            HLines: 8,
            VLines: 3

        }, {
            Name: "BoxFadeInRightLeft",
            Speed: 0.8,
            Delay: 0.07,
            HLines: 8,
            VLines: 3

        }, {
            Name: "BoxScaleFromTop",
            ScaleFrom: 0.5,
            Speed: 1,
            Delay: 0.04,
            HLines: 8,
            VLines: 3
        }, {
            Name: "BoxScaleFromBottom",
            ScaleFrom: 0.5,
            Speed: 1,
            Delay: 0.04,
            HLines: 8,
            VLines: 3
        }, {
            Name: "ScaleFromCenter",
            ScaleFrom: 0.1,
            Speed: 1,
            HLines: 8,
            VLines: 3
        }
    ],
    MouseOver: function() {},
    MouseOut: function() {}
</script>