Avartan Slider WordPress Plugin Help Document

We appreciate your decision of using our Avartan Slider Plugin. Thanks you for purchasing Avartan Slider plugin for WordPress.

This document is written very carefully by keeping mind set that it should be easy understand for Beginner to Advance user or developers. We have divided this document in 3 main section.

1) Getting Started: This section will very help full for introduction and understand how plugin works
2) Detailed Document: This section explains every thing about Avartan Slider plugin with every settings.
3) Other: This section provides information about miscellaneous item 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

• Created On: 2nd October 2015
• Last Updated On: 21st June 2017
• Created By: Solwin Team
• Email: support@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 top you can see the Add New button, click the button.

   

4. Step 4. Again at top you can see/view Upload Plugin button, click the button.

   

5. Step 5.Extract the zip Avartan Slider.zip that you have downloaded from your Member Area at Codecanyon website. You will find Avartan Slider.zip file in it. Now upload the plugin zip file (Avartan Slider.zip). 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.zip) from your Member Area at Codecanyon website.

2. Step 2.Extract Zip file. You will get two zip files from it. Extract Avartan Slider.zip file and it will create "avartanslider" folder with all plugin files & folder inside it. (Remember 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 list

5. Step 5.Click on Activate to active Avartan Slider plugin.

1. Step 1. Go to Dashboard » Avartan Slider

   ( List View )

   

   ( Grid View )

   

2. Step 2. Click on

   

   

3. Step 3. Select slider type from the dialog box. or select default slider template from the dialog box.

4. Step 4. Add the slider name. Then shortcode of slider will be generated automatically (see image below).

   

5. Step 5. Click on button at top of page. And Enjoy the Slider!

• 

• Slider Name

  A name used for slider.

• Alias

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

• Shortcode

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

• PHP Function

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

• 

• Source

  Default Post: Slider will take a posts from default wordpress post type.

  Specific Post: Slider will take a posts from specific post ids.

• Post Type

  Select Post type for display posts on slider.

  Note: If in Source option you have choose Default Post then only Post Type setting is available.

• Post Terms

  Select post terms to filer posts on slider.

  Note: If in Source option you have choose Default Post then only Post Terms setting is available.

• Sort Post By

  Select posts order that you want to display on slider. You can sort by post ID, Date, Title, Slug, Author, Last Modified, Number of Comments, Random, Custom Order.
  Default: Post ID

• Sort Direction

  Select post sort direction.
  Default: Descending

• Post Per Slider

  Enter numbers of post to display on slider.
  Default: 10

• Excerpt Limit

  Enter Character limit of post excerpt to display on slider.
  Default: 10

• 

• Specific Post

  Slider will take a specific posts from given ids.

  Note: If in Source option you have choose Specific Post then only Specific Post setting is available.

• 

• Layout

  • Full Width

    The Slider will always stretch across the entire width of the screen.

  • Fixed

    Slider will take width and height that are assigned to slider.

• Force full width

  The slider will display forcefully in full screen.

  Note: This option is only available when slider set as full width.

• 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.

• Mobile Custom Design

  Select ON to set Custom mobile layer on slider.

General settings are divided into two parts.

• General
• Loader

1. General

• 

  • Automatic Slide

    If set on then the slider's slides are automatically looped.

  • Random Slide

    If on then slider slides are randomly looped.

  • Pause on Hover

    If on then slider progress will be stopped when the user hovers their mouse over the slider.

  • Swipe & Drag

    If on drag/swipe navigation is enabled. User can use mouse drag navigation.

2. Loader

• 

  • Enable

    If on then the loader will be shown when the slider initialize.

  • Type

    There are two types of loaders.

    • Select Default Loader

      Select your favorite CSS3 Loader from Loaders collection.

    • Upload New Loader Image

      You can upload the any loader image that you like.

Visual settings are divided into three types.

• Appearance
• Mobile
• Timer Bar

1. Appearance

• 

  • Background Color

    • Transparent

      If you select the transparent background, then the slider's main background will be displayed transparent.

    • Select Color

      Select background color of your choice for slider's background.

      Select Opacity of background color from 0 to 100 percentage(%).

  • Shadow

    Select shadow for your slider from shadow library.

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.

3. Timer Bar

• 

  • Show Timer Bar

    Set on to display the timer bar during the slide execution.

  • Timer Bar Position

    • Top

      Set time bar position at top of slider.

    • Bottom

      Set time bar position at bottom of slider.

Navigation divided into two types.

• Arrows
• Bullets

1. Arrows

• 

  • Enable

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

  • Style

    Choose CSS3 arrows from pre-built styles.

  • Horizontal Position

    Set horizontal position for left arrow.

  • Vertical Position

    Set vertical position for left arrow.

  • Horizontal Offset

    Set horizontal offset for left arrow.

  • Vertical Offset

    Set vertical offset for left arrow.

  • Horizontal Position

    Set horizontal position for right arrow.

  • Vertical Position

    Set vertical position for right arrow.

  • Horizontal Offset

    Set horizontal offset for right arrow.

  • Vertical Offset

    Set vertical offset for right arrow.

2. Bullets

• 

  • Enable

    Enable/Disable bullets navigation of the slider.

  • Style

    Choose CSS3 bullets from pre-built styles.

  • Direction

    Set display direction of bullets.

    • Horizontal

      Bullets displayed side by side.

    • Vertical

      Bullets placed on top/bottom of one another.

  • Gap

    Set the spacing between the bullets.

    • If Bullets are horizontally aligned, add space to left/right.
    • If Bullets are vertically aligned, add space to top/bottom.

  • Horizontal Position

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

  • Vertical Position

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

  • Horizontal Offset

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

  • Vertical Offset

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

• 

• • Enable Parallax/3D

    Enable/Disable Parallax/3D in slider

  • Enable 3D

    Enable rotating effect of slider

  • 3D Shadow

    Enable 3D shadow

  • 3D BG Disabled

    Enable background 3D effect

  • Slider Overflow Hidden

    Hide slides when go outside of the slider.

  • Layers Overflow Hidden

    Hide layers when go outside of the slider.

  • Default 3D Depth

    Set default 3D depth level.

  • Animation Speed

    Enter Animation speed when mouse hover or scroll

  • Level Depth

    Add different levels to different slide layers is what gives the content its “depth” in relation to other parallax layers

• 

• onLoaded

  Callback function for slider load.

• beforeSlideStart

  Callback function for slide start.

• afterSlideFinish

  Callback function for slide finish.

• onChange

  Callback function for slide change.

• onPause

  Callback function for slider pause.

• onResume

  Callback function for slider resume after pause.

1. Import

• Step 1: Go to Dashboard » Avartan Slider

• Step 2: To import your exported slider, click on

  • 

• Step 3: Browse slider .zip(i.e demo_slider.zip) file.

  • 

• Step 4: Click on Import Slider

2. Export

• To export slider click on button, that will save your slider related all settings.

  

• 

• Background Type Transparent

  Select 'Transparent' option if you don't want any background.

• 

• Solid Type Color

  Select 'Solid Color' option if you want to display color as a background.

• BG Color

  Set Background solid color for slide.

  Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.

• 

• Background Type Gradient

  Select 'Gradient' option if you want to display gradient color as a background.

• BG Gradient Color

  Set different background gradient color in slide.

• BG Gradient Angle

  Set Background gradient angle in slide.

• Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.

• 1. Background Type

  1. Using this option you can set post image as background image in post slider.

     You can apply feature image only in post base slider.

• Background Type Image

  Select 'Image' option if you want to set custom image in slide background.

• BG Image

  Select image from wordpress default media library.

• Alter Text

  Enter alter text for selected image.

• Image Title

  Enter title name for selected image.

• BG position

  Set background position for selected image like Center Top,Center Right,Center Bottom,Center Center,Left Top,Left Center,Left Bottom,Right Top,Right Center,Right Bottom,(X%, Y%).
  Default Settings: Center Center.

• BG Size

  Set background size for selected image like Cover,Contain,Percentage,Normal.
  Default Settings: Cover.

• BG Repeat

  Set background repeat flow for selected image like No Repeat,Repeat,Repeat-x,Repeat-y.
  Default Settings: Cover.

• 

• Background Type Youtube Video

  Select 'Youtube Video' option if you want to set youtube video as a slide background.

• Youtube ID or URL

  Please enter the youtube id/url and you must have to set poster image. Example: iNJdPyoqt8U.

• Force Cover

  Set ON then video display forcefully in fullwidth.

• Aspect Ratio

  Select your apropriate Aspect Ratio.
  Default: 16:9

• Video Settings

  Video embeded setings.

  Loop Video: Video play continuously in slide.

  Next Slider On End: Slider will change automatically after video end.

  Force Rewind: Video will always start from the beginning each time of the slide is shown.

  Mute: Choose on to mute the video’s volume in slider.

  Default Settings: Video should be autoplay and controls should be hide.

• 

• Background Type Vimeo Video

  Select 'Vimeo Video' option if you want to set vimeo video as a slide background.

• Youtube ID or URL

  Please enter the vimeo id/url and you must have to set poster image. Example: iNJdPyoqt8U.

• Force Cover

  Set ON then video display forcefully in fullwidth.

• Aspect Ratio

  Select your apropriate Aspect Ratio.
  Default: 16:9

• Video Settings

  Default Settings: Video should be autoplay and controls should be hide.

• 

• Background Type Vimeo Video

  Select 'Vimeo Video' option if you want to set vimeo video as a slide background.

• Youtube ID or URL

  Please enter the vimeo id/url and you must have to set poster image. Example: iNJdPyoqt8U.

• Force Cover

  Set ON then video display forcefully in fullwidth.

• Aspect Ratio

  Select your apropriate Aspect Ratio.
  Default: 16:9

• Video Settings

  Default Settings: Video should be autoplay and controls should be hide.

In order to add text element...

• 1. Selected 3D Depth

  1. This setting will show you the parallax 3D depth what you insert in your slider Parallax & 3D setting's Default 3D Depth section

  NOTE: this option is display when you enabled Parallax/3D in your main slider setting.

• 1. Ken Burns

  1. An smooth zoom effect that will move and scale into the main background image slowly after the slide start.

• 2. Scale in %

  1. From: Set the starting scale percentage value of the image

  2. To: Set the ending scale percentage value of the image

• 3. Horizontal Offsets

  1. These offset values are in relation to your main background image’s Background Position value Horizontally

• 4. Vertical Offsets

  1. These offset values are in relation to your main background image’s Background Position value Vertically

• 5. Rotation

  1. Apply a starting and ending rotation for the effect to the background image

• 6. Easing

  1. “Easing” is what gives a web animation that “real life” type of movement. For a traditional Ken Burns effect, “Linear.easeNone” is usually the best choice. But you can test the other options to see which one you like best

• 7. Duration

  1. The total time the Ken Burns effect will last, in milliseconds, It’s usually best to set this to the same number used for the slide’s delay value.

• 1. Color Overlay Type

  1. select color to set it on slide main background image.

  2. Solid Color: Set one color upon the background image

  3. Gradient Color: Set multiple color upon the background image

• 2. Select Color

  1. Select color to set overlay color upon slide main background image.

  Note: Plugin provide bootstrap Color picker with opacity instead of separate background color opacity.

• 3. Patterns Overlay

  1. You can add various type of pattern overlay upon main background image in slide.

  2. 

• 1. Slot Amount

  1. Represents the number of “pieces” the image is divided into for these animations in milliseconds. For Ex.(1000 = 1 second).

• 2. Slot Rotation

  1. Applies a slide background image rotation to the slot-based animation. For Ex.(10deg).

• 3. Ease In

  1. The easing applied when the background animates comes into view.

• 4. Ease Out

  1. The easing applied when the background animates out of view (on slide change).

• 5. Time

  1. Set slide total time interval values in milliseconds. For Ex.(1000 = 1 second).

• 6. Start Speed

  1. Set slide starting speed values in milliseconds. For Ex.(1000 = 1 second).

• 

• Enable Link

  To Enable / Disable link for slide.

• Link to Slide

  Select link type for slide. Their are 4 types of link are available: Simple link, next slide, previous slide and Scroll below slider.

• Slide Link

  Enter link for slide.

• Link Target

  Link open in new tab / same tab.

• 

• ID

  Add ID attribute to slide.

• Classes

  Add Class attribute to slide.

• Title

  Add Title attribute to slide.

• Rel

  Add Rel attribute to slide.

• 

• Slide Description

  Add description for slide.

• Custom CSS

  Apply custom CSS to the slide. Ex: display: block;verticle-align: middle; Note: Do not use .class_name{} or #id{}.

• 

• There are 7 types of Elements available. Text/HTML, Image, Video, Shortcode, Button, Icon and Shape.
  Each element has different options.

• 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.

In order to add text element...

Step 1. click on    Text/HTML from   Add New Layer

• Basic Text

  Type in some regular text to be used for the element’s content.

• Icon

  You can set icon from

• Post Based Filter

  You can set a different types of post filter in slide from and it's use only in post based slider.

  Note: Post base Filter is available only for post base slider.

Step 2. Set layer setting options.

• Raw HTML Content

  You can add raw HTML depending on your layer content needs.

• Resize & Rotate

  You can resize and rotate text element in editor.

In order to add image element...

Step 1. click on    Image

Step 2. And set layer setting options.

• Change Image

  To change the image then click on

• Resize & Rotate

  You can resize and rotate image in editor.

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. HTML5 Video

  • 

  • Choose Video Type

    Select video type as HTML5.

  • HTML5 Video Links

    Enter HTML5 video links like MP4, WEBM and OGV.

  • 

  • Step: 3 Set Video 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.

  • 

  • Image

    Select image to set preview image for video layer.

In order to add shortcode element...

Step 1. click on    Shortcode

Step 2. And set shortcode setting options

• Shortcode

  Enter any wordpress valid shortcode in textbox.

In order to add button element...

Step 1. click on    Button

Step 2. And set button setting options.

• Button Style

  Select your button style from given option.

• Button Text

  Enter button label or text.

• Button Icon

  As well as you can add icon with button element form huge collection of icon from icon elements.

• Post Filter

  You can set post filter in button from but this option is available only post based slider.

  Note: Post Filer setting is available only for Post base Sliders.

In order to add icon element...

Step 1. click on    Icon

Step 2. And set icon setting options.

• Select Icon

  Select icon from below dialog box.

In order to add icon element...

Step 1. click on    Shape

Step 2. And shape setting options.

• Height & Width

  You can set height and width of shape element from above element design options.

• Font Family

  You can set 800+ various types of Font family ( Powered by Google Fonts ) from here to your text elements.

  Note: Font Family is disabled when shape element, video element, image element, and icon element is selected.

• 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.

• Line Height

  You can set font line height to your text elements from here to your text elements.

  Note: Line Height is disabled when shape element, video element, and image element is selected.

• Font Weight

  You can set font Weight to your text elements from here to your text elements.

  Note: Line Weight is disabled when shape element, video element, image element, and icon element is selected.

• Italic

  You can set italic font Style to your text elements from here to your text elements.

  Note: Italic is disabled when shape element, video element, image element, and icon element is selected.

• Text Transform

  You can set text transform text Style to your text elements from here to your text elements.
  For Example: None (Default selected Value), Capitalize, Uppercase, Lowercase, and Full Width...

  Note: Text Transform is disabled when shape element, video element, image element, and icon element is selected.

• Letter Spacing

  You can set letter spacing to your text elements from here to your text elements.

  Note: Letter Spacing is disabled when shape element, video element, and image element is selected.

• White Space

  You can set white spacing to your text elements from here to your text elements.

  Note: White Space is disabled when shape element, video element, and image element is selected.

• Text Decoration

  You can text decoration line to your text elements from here to your text elements.

  Note: Under Line is disabled when shape element, video element, and image element is selected.

• Text Alignment

  You can set text alignment to your text elements from here to your text elements.
  For Example: Align Left (Default selected Value), Align Center, Align Right, AndAlign Justify.

  Note: Text Alignment 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.

• Element Border

  You can set element border color type and color to your text elements from here to your text elements.

  Note: Using this option you can set different type of border to your element like this .

• Border Radius

  You can set element border radius type and color to your text elements from here to your text elements.

• Padding

  You can set element padding type and color to your text elements from here to your text elements.

• Offset

  You can set element Offset , shadow position, type direction, color and shadow display to your text elements from here to your text elements.

• 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.

• Height Width

  Using Height and Width You can set elements height and width.

• Full Width

  By clicking this full width option You can set elements into selected slider behavior setting.

  Like: If you select Layer Behavior to Grid then apply element full width to grid's Width and,
  Like: If you select Layer Behavior to Slider then apply element full width to slider's Width.

• Full Height

  By clicking this full height option You can set elements into full height (related to slider's height).

  Like: If you select Layer Behavior to Grid then apply element full width to grid's height and,
  Like: If you select Layer Behavior to Slider then apply element full width to slider's height.

• Layer Behavior

  Layer behavior is generally useful that time when you working with Full Width slider, like sometimes you want your content to align to the sides of the screen as opposed to your slider’s Layers Grid size.

• Element Alignment

  Using alignment option you can move your alignment to proper position under whole slider area like: Top Left, Top Center, Top Right, Center Left, Center Center, Center Right, Bottom Left, Bottom Center, Bottom Right.

• 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 "all" to set the entire time.
  Default: all

• 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

• Start Speed

  How long element animation will last from starts in milliseconds for Ex.(1000 = 1 second).

• End Speed

  How long element animation will last finished in milliseconds for Ex.(1000 = 1 second).

• ID

  Add ID attribute to element.

• Classes

  Add Class attribute to element.

• Title

  Add Title attribute to element.

• Rel

  Add Rel attribute to element.

• Alt

  Add Alter attribute to element.

  Note: Alt is displayed when image element is selected.

• Link Type

  Select Link Type for where we want to redirect slide.

• Link

  Open the link (e.g.: http://www.google.com) on click. Leave it empty if you don't want it.

• Target

  Select option for open link in Same Window / New Window

• Show On Device

  Select device icon to show selected element to that device.
  Default:Both are Selected

• Hide Under Width

  Hiding 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..

• Advance CSS

  Apply Custom css for selected layer

• Layer 3D Depth

  You can assign the 3D depth to selected layer.

  Note: Parallax / 3D setting for particular elements is available when it is on from slider Parallax/3D setting.

• Grid Helper

  Using grid option , These are optional pixel based guide lines that can help when positioning your layers on the slider area.

  The Grid Helper is as shown in the screenshot below.
  

• Snap To

  Using Snap To option While dragging and dropping elements in to your Layers in the slide area, you can choose to snap the Layer’s position based on the Helper Grid Lines or in related to other existing layers..

  The Grid Helper is as shown in the screenshot below.
  

• Mobile View

  Using mobile view option you can show/hide layer on screens 360px wide or higher (smartphone portrait).

  The mobile is as shown in the screenshot below.
  

• Element Resize

  Using this resize icon you can easily resize your element height and width.

  The resize element is as shown in the screenshot below.
  

• Element Point

  Using element alignment icon you can easily show the element alignment in your slider area.

  The resize element is as shown in the screenshot below.
  

• Element Rotator

  Using element rotator icon you can rotate any element to it's current position in your slider area.

  The resize element is as shown in the screenshot below.
  Main position  After rotating element

1. Create Post Based Slider

• 1. Click on Add new slider icon button

  2. Click on post based slider template section

  • 

  3. Appy post slider display setting Settings.

Post Filter Post based slider:

1. 1. Post Title:
   

   To display post title in slider.

   Code: {{title}}

   ---

2. 2. Post Title With Link:
   

   To display post title with post link in slider.

   Code: {{titlewithlink}}

   ---

3. 3. Post Alias:
   

   To display post alias with post link in slider.

   Code: {{alias}}

   ---

4. 4. Post content:
   

   To display post content in post slider.

   Code: {{content}}

   ---

5. 5. Post content limit by words:
   

   To display post content with limited words in post slider.

   Ex: 20 words in post content.

   Code: {{content:words:10}}

   In above code format 10 is the limit of post content words.

   ---

6. 6. Post content limit by character:
   

   To display post content with limited characters in post slider.

   Ex: 20 characters in post content.

   Code: {{content:words:10}}

   In above code format 10 is the limit of post content characters.

   ---

7. 7. Post Excerpt:
   

   To display post except (Short Description of post) in post slider.

   Code: {{excerpt}}

   ---

8. 8. Post Format:
   

   To display post format in post slider.

   Code: {{post_format}}

   ---

9. 9. Post Format Icon:
   

   To display post format icon in post slider.

   Code: {{post_format_icon}}

   ---

10. 10. The link to the post:
    

    To apply post link to slide.

    Code: {{postlink}}

    ---

11. 11. Author name:
    

    To display post author in to slide.

    Code: {{author_name}}

    ---

12. 12. Total Comment:
    

    To display number of comments of the post in to slide.

    Code: {{num_comments}}

    ---

13. 13. Click here to see Metakeys:
    

    To display meta tags of the post in to slide.

    Code: {{meta:somemegatag}}

    ---

14. 14 List of categories with links:
    

    To display category with link of the post in to slide.

    Code: {{catlistlink}}

    ---

15. 15 List of categories:
    

    To display only category name list of the post in to slide.

    Code: {{catlist}}

    ---

16. 16 List of categories without comma and link:
    

    To display only category name without link and comma in to slide.

    Code: {{catonlylink}}

    ---

17. 17 List of categories without comma:
    

    To display only category name without comma in to slide.

    Code: {{taglist}}

    ---

18. 18 List of tags:
    

    To display all tag name list in to slide.

    Code: {{taglist}}

    ---

19. 19 List of tags with link:
    

    To display all tag name list with link in to slide.

    Code: {{taglistlink}}

    ---

20. 20 List of tags without comma:
    

    To display all tag name without comma in to slide.

    Code: {{tagonly}}

    ---

21. 21 List of tags without comma and link:
    

    To display all tag name without comma and link in to slide.

    Code: {{tagonlylink}}

    ---

22. 22 Date created:
    

    To display post create date in to slide.

    Code: {{date}}

    ---

23. 23 Date modified:
    

    To display post last date updated in to slide.

    Code: {{date_modified}}

    ---

24. 24 Post year:
    

    To display post created year (in short value) in to slide.

    Ex: if post publish year is 2016 then it will dispaly only 16.

    Code: {{year}}

    ---

25. 25 Post full year:
    

    To display post full year in to slide.

    Ex: if post publish year is 2016 then it will dispaly only 2016.

    Code: {{fullyear}}

    ---

26. 26 Post year link:
    

    To display post year with link in to slide.

    Code: {{yearlink}}

    ---

27. 27 Numeric Month:
    

    To display post month in numeric value in to slide.

    Code: {{monthnum}}

    ---

28. 28 Short month name:
    

    To display post month short name in to slide.

    Ex: if post publish month is January then it will dispaly only Jan.

    Code: {{month}}

    ---

29. 29 Full month name:
    

    To display post month full name in to slide.

    Ex: if post publish month is January then it will dispaly January.

    Code: {{fullmonth}}

    ---

30. 30 Post month link:
    

    To display post month with link in to slide.

    Code: {{monthlink}}

    ---

31. 31 Day of the month:
    

    To display post created day of the month in to slide.

    Code: {{day}}

    ---

32. 32 Day of the month without zero:
    

    To display post created day without zero of the month in to slide.

    Ex: if post publish day is January 03 2016 then it will dispaly 2.

    Code: {{daysh}}

    ---

33. 33 Day name:
    

    To display post created day name of the month in to slide.

    Ex: if post publish day is January 03 2016 then it will dispaly Sun.

    Code: {{dayname}}

    ---

34. 34 Day full name:
    

    To display post created day full name of the month in to slide.

    Ex: if post publish day is January 03 2016 then it will dispaly Sunday.

    Code: {{dayfullname}}

    ---

35. 35 Post day link:
    

    To display post created day name with link of the month in to slide.

    Code: {{daylink}}

    ---

36. 36 Featured Image URL Original Size:
    

    To display post featured image link with original size in to slide.

    Code: {{featured_image_url_full}}

    ---

37. 37 Featured Image -> Original Size:
    

    To display post featured image thumb into original size in to slide.

    Code: {{featured_image_full}}

    ---

38. 38 Featured Image URL Thumbnail:
    

    To display post featured image thumbnail size url in to slide.

    Thumbnail size of the post is 150x150.

    Code: {{featured_image_full}}

    ---

39. 39 Featured Image img -> Thumbnail:
    

    To display post featured image thumbnail size in to slide.

    Thumbnail size of the post is 150x150.

    Code: {{featured_image_full}}

    ---

40. 40 Featured Image URL Medium:
    

    To display post featured image medium thumbnail url size in to slide.

    Medium thumbnail size of the post is 300×188.

    Code: {{featured_image_url_medium}}

    ---

41. 41 Featured Image img -> Medium:
    

    To display post featured image medium thumbnail in to slide.

    Medium thumbnail size of the post is 300×188.

    Code: {{featured_image_medium}}

    ---

42. 42 Featured Image URL Large:
    

    To display post featured image larger thumbnail url in to slide.

    Medium thumbnail size of the post is 1024x640.

    Code: {{featured_image_url_large}}

    ---

43. 42 Featured Image img -> Large:
    

    To display post featured image larger thumbnail in to slide.

    Medium thumbnail size of the post is 1024x640.

    Code: {{featured_image_large}}

    ---

44. 43 Featured Image URL Medium Large:
    

    To display post featured image medium large thumbnail url in to slide.

    Medium thumbnail size of the post is 768×480.

    Code: {{featured_image_url_medium_large}}

    ---

45. 43 Featured Image img -> Medium Large:
    

    To display post featured image medium large thumbnail in to slide.

    Medium thumbnail size of the post is 768×480.

    Code: {{featured_image_medium_large}}

    ---

46. 43 Featured Image URL Post-thumbnail:
    

    To display post featured image post thumbnail url in to slide.

    Medium thumbnail size of the post is .

    Code: {{featured_image_url_post-thumbnail}}

    ---

47. 43 Featured Image img -> Post-thumbnail:
    

    To display post featured image post thumbnail in to slide.

    Medium thumbnail size of the post is -.

    Code: {{featured_image_url_post-thumbnail}}

    ---

48. 44 Featured Image URL Blog Img:
    

    To display post featured image blog thumbnail url in to slide.

    Medium thumbnail size of the post is -.

    Code: {{featured_image_url_blog_img}}

    ---

1. 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
    if(function_exists("avartanslider")) avartanslider("alias");
    in your php template or in php file where you want to use.
    

2. 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.

3. Add Avartan Slider From Visual Composer Plugin.

4. Add Avartan Slider From Page Builder by SiteOrigin Plugin.

5. Add Avartan Slider From Beaver Builder Plugin.

6. Add Avartan Slider From BE Page Builder Plugin.

7. Add Avartan Slider From Elementor Plugin.

8. Add Avartan Slider From WR Pagebuilder Plugin.

9. Add Avartan Slider From Tailor Plugin.

I've used the following jQuery Plugins as listed.

• wp color picker alpha - Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker.
• Jquery Growl - jQuery Growl is a Growl like notification plugin for jQuery.
• Web Font Loader - Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience.
• Perfect Scrollbar - Minimalistic but perfect custom scrollbar plugin.
• Jquery UI Rotatable - jquery-ui-rotatable is a plugin for jQuery UI that works in a similar way to Draggable and Resizable.
• Select-2 JS - Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.
• Clipboard - A pretty common use case is to copy content from another element.
• TouchSwipe - A jQuery plugin to be used on touch devices such as iPad, iPhone, Android etc.
• Greensock - Greensock is a JavaScript library for high-performance HTML5 animations that work in all major browsers.
• Fontawesome - Font Awesome is a full suite of 675 pictographic icons for easy scalable vector graphics on websites, created and maintained.
• flaticon - Flaticon is the largest search engine of free icons in the world.

We are very happy to assist you!