We appreciate your decision of using our Avartan Slider Plugin. Thank you for using an Avartan Slider plugin for WordPress.

This document is written very carefully by keeping the mindset that it should be easily understood for Beginner to Advance user or developers. We have divided this document into 3 main sections.

1) Getting Started: This section will very help full for introduction and understand how the plugin works.
2) Detailed Document: This section explains everything about Avartan Slider plugin with every setting.
3) Other: This section provides information about miscellaneous items like plugin features, support etc.

If you have any query that is beyond the scope of document, please feel free to contact us at support@solwininfotech.com

• Last Updated: 26th may 2018
• Created On: 09th August 2015
• Created By: Solwin Team
• Email: info@solwininfotech.com

1. Installation Via WordPress Admin area

1. Step 1. Log into your WordPress admin area.
2. Step 2. Click on the left plugin menu.
3. Step 3. Now at the top you can see the Add New button, click the button.
4. Step 4. Again at the top you can see/view Upload Plugin button, click the button.
5. Step 5. Now upload the plugin zip file (avartan-slider-lite.zip) that you have downloaded from wordpress.org. After upload, install the zip and click on "Activate Plugin".

2. Installation Via FTP

1. Step 1. Download Avartan slider plugin zip file (avartan-slider-lite.zip) from wordpress plugin directory
2. Step 2. Extract Zip file. It will create "avartan-slider-lite" folder with all plugin files & folder inside it. (Remember the extracted folder path)
3. Step 3. Using your FTP program, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
4. Step 4. Go to Dashboard » Plugins » Installed Plugins and find Avartan Slider Lite plugin from the list.
5. Step 5. Click on Activate to the active Avartan Slider Lite plugin.

1. Step 1. Go to Dashboard » Avartan Slider
2. Step 2. Click on "Create New Slider" Button.
3. 
4. Step 3. Click on "Standerd Slider".
5. 
6. Step 4. Add the slider name. Shortcode of the slider will be generated automatically (see image below).
7. Step 5. Click on 'Save Settings' button at bottom of page. And Enjoy the Slider!
8. 

1. Slider Name

A name used for a slider.

2. Alias

An individual slider name. This name will be embedded in slider shortcode, so do not use special characters.

3. Shortcode

This is the Shortcode that will be embedded into your pages, widgets, etc.

4. PHP Function

This is the PHP function used in page template or in core files.

1. Slider Layout Type

• Fixed: The slider will take width and height that are assigned to slider.
• Full Width: The slider will always stretch across the entire width of the screen.

2. Force full width

The slider will display forcefully in full screen

3. Layer Grid Size

Set initial height and width of slider for grids in pixels.

• Desktop Layer Grid Size: Set width and height of slider grid for desktop in pixels.
• Mobile Layer Grid Size: Set width and height of slider grid for mobile in pixels.
  
  NOTE: Mobile Layer Grid Size is available in pro version.
  Click Here to get info about Mobile Layer Grid Size.
• Mobile Custom Design: Select ON to set Custom mobile layer on slider.

1. General

• Automatic Slide: Set slider navigation loop automatically.
• Random Slide: Set slider order random position.
  
  NOTE: Random Slide feature is only available for PRO version.
• Pause On Hover: It pause the current slide when mouse is hover on slide area.
• Swipe & Drag: Enable swipe left, swipe right, drag left, drag right commands.

2. Loader

• Enable: Enable/Disable loader in slider.
  
  NOTE: Loader Enable/Disable feature is only available for PRO version.
• Type: Select loader type
  
  1. i. Default Loader: Avartan slider provide 6 type of default loaders.
     
  2. ii. Upload new loader image: You can upload your own loader image here.
     
     NOTE: Upload loader feature is only available for PRO version.

1. Appearance

• Background Color: Set slider background color.
• Shadow: Select slider shadow.
  

2. Mobile

• 

  • Hide Slider

    Set width under which you want to hide slider.

  • Hide Defined Elements

    Set width under which you want to hide defined elements.

  • Hide All Elements

    Set width under which you want to hide all the elements.

  • Hide Arrows

    Set width under which you want to hide arrows.

  • Hide Bullets

    Set width under which you want to hide bullets.

  NOTE: This feature is only available for PRO version.

3. Timer Bar

• Show Timer Bar: Enable/Disable to show timerbar on slider.
• Timer Bar Position: Set timerbar position.

1. Arrows

• Enable

  Enable/Disable 'Previous' and 'Next' arrows of the slider.

• Style

  Choose CSS3 arrows from pre-built styles.

• Horizontal Position PRO!

  Set horizontal position for left arrow.

• Vertical Position PRO!

  Set vertical position for left arrow.

• Horizontal Offset PRO!

  Set horizontal offset for left arrow.

• Vertical Offset PRO!

  Set vertical offset for left arrow.

• Horizontal Position PRO!

  Set horizontal position for right arrow.

• Vertical Position PRO!

  Set vertical position for right arrow.

• Horizontal Offset PRO!

  Set horizontal offset for right arrow.

• Vertical Offset PRO!

  Set vertical offset for right arrow.

2. Bullets

• 

  • Enable

    Enable/Disable bullets navigation of the slider.

  • Style

    Choose CSS3 bullets from pre-built styles.

  • Horizontal Position PRO!

    Set Position of bullets to the left, center or right of the slider.

  • Vertical Position PRO!

    Set Position of bullets to the top, center or bottom of the slider.

  • Horizontal Offset PRO!

    Add left/right margin to the bullets as per to its horizontal alignment

  • Vertical Offset PRO!

    Add top/bottom margin to the bullets as per to its vertical alignment

1. Parallax & 3D

1. Callbacks

1. Source & Settings

1. Background Type
   • Transparent: For transparent background.
   • Solid Color: For background color.
   • Gradient Color: For Gradient background color (Multiple Color).
     
     NOTE: This feature is only available for PRO version.
     Click here to get info about Gradient Color.
   • Image: For background image.
   • YouTube Video: For background youtube video.
     
     NOTE: This feature is only available for PRO version.
     Click here to get info about YouTube Video.
   • Vimeo Video: For background vimeo video.
     
     NOTE: This feature is only available for PRO version.
     Click here to get info about Vimeo Video.
   • HTML5 Video: For background HTML5 video.
     
     NOTE: This feature is only available for PRO version.
     Click here to get info about HTML5 Video.

2. Parallax/3D

Enable the parallax effect for the slider, and if enabled, parallax usually works best on desktop computers.

3.Ken Burns

1. Ken Burns: On/Off ken burns or pan zoom effect in slide.
2. Scale in %: Add image scale(zooming) value here.
3. Horizontal Offsets: Set horizontal offsets for ken burn effect.
4. Vertical Offsets: Set vertical offsets for ken burn effect.
5. Rotation: Set image rotation value while ken burn effect is apply in slide.
6. Easing: Set ken burn effect css3 animation type using here.
7. Duration: Set ken burn effect css3 animation duration time.

4. Overlay

1. Color Overlay Type
   • Solid Color: For solid color overlay background.
     • Select Color: Set background overlay color.
   • Gradient Color: For multiple transparent background.
     • Gradient Color Overlay: Set colors using color picker.
     • Gradient Overlay Angle: Set gradient color display angle.
   • Pattern Overlay: Ser pattern overlay in background image or color.
   NOTE: Overlay feature is only available in PRO version.
   Click here to get info about Overlay.

1. Slot Amount: Set slide animation starting duration time in millisecond.
   
   NOTE: This feature is only available for PRO version.
   Click here to get info about Slot Amount.
2. Slot Rotation: Set slide rotation angle.
   
   NOTE: This feature is only available for PRO version.
   Click here to get info about Slot Rotation.
3. Ease In: Set slide entry(In) animation effect.
   
   NOTE: This feature is only available for PRO version.
   Click here to get info about Ease In.
4. Ease Out: Set slide exit(Out) animation effect.
   
   NOTE: This feature is only available for PRO version.
   Click here to get info about Ease Out.
5. Time: Set slide total time.
6. Start Speed: Set Animation start speed in millisecond.
7. Transition effects Various transition effects can be applied to slides.
   • Fade
   • Fade From Right
   • Fade From Left
   • Slide To Top
   • Slide To Bottom
   • Slide To Right
   • Slide To Left

1. Enable Link: Click to enable disable link.
2. Link to Slide: Select link option for slide.
   • Simple Link: Set simple link to slide.
   • Next slide: Set link to move on next slide.
   • Previous slide: Set link to move on previous slide.
   • Scroll Below Slider: Set link to scroll below to slider after click on slide element.
3. Slide Link: Set simple link URL target.
   NOTE: Slide Link display when simple link selected from Link TO slide option.
   
   
   NOTE: Action feature is only available for PRO version.
   Click here to get info about Action.

1. ID: Add ID for slide.
2. Classes: Add id for particular slide.
   NOTE: Here you can add multiple classes using space Like: "class1 class2 class3".
3. Title: Add title for particular slide.
4. Rel: Add related text for particular slide.

1. Slide Description: Add description about selected slide.
   
   NOTE: Slide Description is available in pro version.
   Click Here to get info about Slide Description.
2. Custom CSS: Add custom CSS for slide elements.
   NOTE: Do not use .class_name{} or #id{}.
   Directly add css value.

• Select Slider Preset

  Clik on Preset button to add premade slide temaplate into existing slide.

• Appy Preset

  Select slide template and click on continue button to apply that template on current slide.

There are 7 types of Elements available. Text/HTML, Image, Video available in Avartan Slider Lite version, Shortcode, Button, Icon and Shape available in Avartan Slider Pro version.
Each element has different options.

1. General Parameters:

• Add New Layer

  To add new Layer in editor click on   Add New Layer then select element which you want.

• Delete Element

  Click on any element from slide and then click on to delete the element.

• Duplicate Element

  Click on any element from slide and then click on to duplicate the element.

• Edit Element

  Click on any element from slide and then click on to edit the element.

• X Position: Using X position You can move your elements from X axis to selected layered alignment.
• Y Position: Using Y position You can move your elements from Y axis to selected layered alignment.

In order to add video element...

Step 1. Click on    Video

Step 2. Navigate to 'Source' tab and 'Choose Video Type'.

Avartan slider provides 3 types of video support.

• 1. Youtube Video

  • 

• Choose Video Type

  Select video type as YouTube.

• Youtube ID or URL

  Enter youtube ID or URL then click on search button to set video in element. Example: iNJdPyoqt8U

• 2. Vimeo Video

  • 

• Choose Video Type

  Select video type as Vimeo.

• Vimeo ID or URL

  Enter Vimeo ID or URL then click on search button to set video in element. Example: 35545973

• 3. Sources

  • 

  • Choose Video Type

    Select video type as HTML5.

  • HTML5 Video Links

    Enter HTML5 video links like MP4, WEBM and OGV.
    

    NOTE: You can upload HTML5 video from WordPress media in pro version only.
    Click Here to get info about set video button.

  • Step: 3 Settings

    

    • Full Screen

      If set "On" then video width and height will both automatically set to 100%.

    • Force Cover

      This means the video will always cover the entire size of the slider, but depending on the video's original size ratio in relation to the slider's actual size.

    • Aspect Ratio

      To set aspect ratio of video. and it only applicable if "Force Cover" is set to "On". Default is 16:9

    • Loop Video

      It specifies that the video will start over again, every time it is finished.

    • Autoplay

      The video will automatically start playing.

    • Autoplay Only First Time

      The video will automatically start playing only one time. Once slide changed the autoplay feature will be disabled.

    • Allow Fullscreen

      If selected then youtube and html5 player will allow to fullscreen feature.

    • Next Slide on Video End

      Automatically change slide after video is completed.

    • Hide Controls

      Hide player controls in Youtube and HTML5.

    • Mute

      It specifies that the audio output of the video should be muted.

    • Show poster on pause

      If preview image is set then poster image will be display when video is paused or ended.

    • NOTE: All video settings are available in pro version.
      

  • • 3. Sources

    • 

    • Preview

      Select image to set preview image for video layer.

• Font Size: You can set font size to your text elements from here to your text elements.
  Note: Font Size is disabled when shape element, video element, and image element is selected.
• Font Color: You can set text alignment to your text elements from here to your text elements.
  Note: Font Color is disabled when shape element, video element, and image element is selected.
  Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.
• Background Color: You can set element background color to your text elements from here to your text elements.
  Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.
• X Position: Using X position You can move your elements from X axis to selected layered alignment.
• Y Position: Using Y position You can move your elements from Y axis to selected layered alignment.

• Delay: How long will the element wait before the entrance. Default: 0ms
• Time: How long will the element be displayed during the slide execution. Write "0" to set the entire time. Default: "0"
• In Animation: The in animation of the element.
• Out Animation: The out animation of the element.
• Ease In: How long will the in animation take. Default: 300ms
  NOTE: Ease in option is available in pro version.
  Click Here to get info about Ease In.
• Ease Out: How long will the out animation take. Default: 300ms
  
  NOTE: Ease out option is available in pro version.
  Click Here to get info about Ease out.
• Start Speed: Set animation start speed. Default: 300ms
• End Speed: Set animation end speed. Default: 300ms

• ID: Add ID attribute to element.
• Classes: Add Class attribute to element.
• Title: Add Title attribute to element.
• Rel: Add Rel attribute to element.
• Link Type: Select link type.
  • No Link: Select No Link if you do not want to set any link on element.
  • Simple Link: Set simple link to element, e.g Open the link http://www.google.com by clicking on element.
  • Next Slide: Set next slide option in element.
  • Previous Slide: Set previous slide option in element.
  • Scroll Below Slider: Set scroll below to slider.
    
    NOTE: Next Slide, Previous Slide & Scroll Below Slider options are available in pro version.
    Click Here to get info about Link Types.
• Link: Open the link (e.g.: http://www.google.com) on click. Leave it empty if you don't want it.
• Target: Set link open target page like open link in new page or same page.

• Show On Device: Select device icon to show selected element to that device. Default: Both are Selected
• Hide Under Width: Under is useful for when lots of content displays nicely on desktop, but there isn’t really enough screen space to fit everything on mobile.
  Default: Off
• Advance CSS: Style the element.
  
  NOTE: Show On Device & Hide Under Width options are available in pro version.
  Click Here to get info about Advance settings.

Add Avartan Slider To Post/Page

1. Add via shortcode

1. Step 1. Go to Dashboard » Pages » Add New Or Dashboard » Posts » Add New
2. Step 2: Click on the Add Avartan Slider button as shown in below image.

2. Add via PHP function

Paste this function if(function_exists('avartanslider')) avartanslider('avartan_slider'); in your php template or in php file where you want to use.

Add Avartan Slider To Widget

1. Step 1. Go to Dashboard » Appearance » Widgets
2. Step 2: Drag the "Avartan Slider Widget" to the desired sidebar.

How to upgrade plugin? Follow the below steps and upgrade your plugin.

Buy now on Codecanyon

You can upgrade Avartan Slider Plugin using 1 of the two ways below

1. Installation Via WordPress Admin area

1. Step 1. Log into your WordPress admin area.
2. Step 2. Click on the left plugin menu.
3. Step 3. Now at the top you can see the Add New button, click the button.
4. Step 4. Again at the top you can see/view Upload Plugin button, click the button.
5. Step 5. Now upload the plugin zip file (Avartan Slider.zip) that you have downloaded from Codecanyon. After upload, install the zip and click on "Activate Plugin".

2. Upgrade Via FTP

1. Step 1. Download Avartan slider plugin zip file (Avartan Slider.zip) from Codecanyon
2. Step 2. Extract Zip file. It will create "Avartan Slider" folder with all plugin files & folder inside it. (Remember the extracted folder path)
3. Step 3. Using your FTP program, upload the non-zipped plugin folder into the "/wp-content/plugins/" folder on your server.
4. Step 4. Go to Dashboard » Plugins » Installed Plugins and find Avartan Slider plugin from the list.
5. Step 5. Click on Activate to the active Avartan Slider plugin.

We would like to thank you for using our Avartan Slider Plugin! If you have any difficulties with Avartan Slider Plugin or need any additional service, do not hesitate to contact us. We provide priority support with our all premium WordPress themes and plugins.

Just contact us on support.solwininfotech.com

We are very happy to assist you!