jQuery Plugins › jQuery Slider Plugins › jQuery ArtDesign Slider

Fully Configurable jQuery Image Slider Plugin - ArtDesign Slider

File Size: 25 KB
Views Total: 735
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE7+, FireFox, Opera, Safari#Responsive#easing
Fully Configurable jQuery Image Slider Plugin - ArtDesign Slider

ArtDesign Slider is a powerful jQuery plugin for creating a fully responsive & configurable image slider with following features:

  • Cross browser.
  • Easy to implement with one JS call.
  • Plain Html markup.
  • Tons of options to customize the image slider.
  • Mousewheel and keyboard navigation support.
  • Auto resize & center the images based on the screen size.
  • Multiple sliders on one page.
  • More that 24+ built-in transition animations.
  • No extra CSS needed.
  • Arrows and dots navigation.

How to use it:

1. Include jQuery javascript library and the jQuery ArtDesign Slider plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery-artdesign-slider.js"></script>

2. Include the jQuery easing plugin and jQuery mousewheel plugin in the document.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

3. Create the Html for an image slider. Use data-slider-title attribute for the slide titles. Use data-slider-description attribute for the image captions.

<div id="demo">
  <ul>

    <li data-slider-title="Title 1" data-slider-description="Description 1">
     <img src="http://lorempixel.com/400/300/people/1"/> 
    </li>

    <li data-slider-title="Title 2" data-slider-description="Description 2">
     <img src="http://lorempixel.com/400/300/people/2"/> 
    </li>

    <li data-slider-title="Title 3" data-slider-description="Description 3">
     <img src="http://lorempixel.com/400/300/people/3"/> 
    </li>

    ...

  </ul>
</div>

4. Initialize the plugin with default settings.

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

5. All the available options with default values.

ClassPrefix     : "Sl_",
SliderResponsive: true,
SliderWidth     : 550,
SliderHeight    : 250,
AnimationEffectsAndSpeed: [
    {
Name: "Fade",
Speed: 1000
    },
    {
Name: "BlindsVerticalFadeToRight",
Speed: 600,
Percent: 6,
Delay: 100
    },
    {
Name: "BlindsVerticalFadeToLeft",
Speed: 600,
Percent: 6,
Delay: 100
    },
    {
Name: "BlindsHorizontalFadeToBottom",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalFadeToTop",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsVerticalTopBottomSlide",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsVerticalSlideToBottomToRight",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsVerticalSlideToBottomToLeft",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsVerticalSlideToTopToRight",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsVerticalSlideToTopToLeft",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsVerticalTopBottomSlideToRight",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsVerticalTopBottomSlideToLeft",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalLeftRightSlide",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalSlideToRightToBottom",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalSlideToRightToTop",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalSlideToLeftToBottom",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalSlideToLeftToTop",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalLeftRightSlideToBottom",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BlindsHorizontalLeftRightSlideToTop",
AnimationFx: "easeOutBack",
Speed: 600,
Percent: 8,
Delay: 100
    },
    {
Name: "BoxFadeToRight",
Speed: 600,
Percent: 12,
Delay: 100
    },
    {
Name: "BoxFadeToLeft",
Speed: 600,
Percent: 12,
Delay: 100
    },
    {
Name: "BoxFadeToBottom",
Speed: 600,
Percent: 12,
Delay: 100
    },
    {
Name: "BoxFadeToTop",
Speed: 600,
Percent: 12,
Delay: 100
    },
    {
Name: "BoxFadeRandom",
Speed: 600,
Percent: 12,
Delay: 80
    }
],
Repeat  : true,
PathToImages    : "/",
CornersWidth    : 20,
CornersHeight   : 20,
SpaceTopHeight  : 20,
SpaceBottomHeight       : 20,
SpaceLeftWidth  : 26,
SpaceRightWidth : 26,
StartImage      : 1,
StartZIndex     : 9999,
ElementStopMouseWheel   : "body",
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Navigation      : true,
NavigationShowNumber    : false,
NavigationLeftWidth     : 13,
NavigationLeftHeight    : 26,
NavigationRightWidth    : 13,
NavigationRightHeight   : 26,
NavigationButtonMarginLeft      : 2,
NavigationButtonMarginRight     : 2,
NavigationPosition      : "Center", //Left, Center, Right
NavigationVertical      : 0,
NavigationMarginLeft    : 0,
NavigationMarginRight   : 0,
NavigationButtonWidth   : 22,
NavigationButtonHeight  : 26,
NavigationColor : "#888888",
NavigationColorHover    : "#CCCCCC",
NavigationFont  : "sans-serif",
NavigationFontSize      : 8,
NavigationFontWeight    : "bold",
NavigationTextLineHeight: 3.2,
NavigationTextAlign     : "center",
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
PrevNext: true,
PrevNextShowSymbol      : true,
PrevSymbol      : "&laquo;",
PrevWidth       : 26,
PrevHeight      : 26,
PrevPosition    : "Center", //Top, Center, Bottom
PrevHorizontal  : 0,
PrevVertical    : 0,
PrevColor       : "#BBBBBB",
PrevColorHover  : "#9D9D9D",
PrevFont: "sans-serif",
PrevFontSize    : 16,
PrevFontWeight  : "bold",
PrevTextLineHeight      : 1.6,
PrevTextAlign   : "center",
NextSymbol      : "&raquo;",
NextWidth       : 26,
NextHeight      : 26,
NextPosition    : "Center", //Top, Center, Bottom
NextHorizontal  : 0,
NextVertical    : 0,
NextColor       : "#BBBBBB",
NextColorHover  : "#9D9D9D",
NextFont: "sans-serif",
NextFontSize    : 16,
NextFontWeight  : "bold",
NextTextLineHeight      : 1.6,
NextTextAlign   : "center",      
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Title   : true,
TitlePosition   : "Left",
TitleVertical   : -5,
TitleMarginLeft : 0,
TitleMarginRight: 0,
TitleColor      : "#BBBBBB",
TitleFont       : "sans-serif",
TitleFontSize   : 13,
TitleFontWeight : "bold",
TitleTextLineHeight     : 1.8,
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Description     : true,
DescriptionPaddingTop   : 10,
DescriptionPaddingBottom: 10,
DescriptionPaddingLeft  : 20,
DescriptionPaddingRight : 20,
DescriptionColor: "#CCCCCC",
DescriptionFont : "sans-serif",
DescriptionFontSize     : 12,
DescriptionFontWeight   : "bold",
DescriptionTextLineHeight       : 1.8,
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
FadeSpeed       : 250

This awesome jQuery plugin is developed by BiserStoilov. For more Advanced Usages, please check the demo page or visit the official website.