Sangar Slider Codex

User Documentation

Thank You

At first we would like to say thank you for choosing Sangar Slider WordPress plugin. In this documentation you will find everything you need to use Sangar Slider WordPress. If you have any questions which are not covered in this documentation, please open a new thread on Support Forum. Our support team will glad to help you.

About the Sangar Slider WordPress

Sangar Slider is a premium high-quality slider plugin for WordPress. With smooth and fast animation, touch and swipe gesture support, modern, easy to use and trully responsive. You can add videos (HTML5, Youtube and/or Vimeo), images, text, and any HTML contents. Packed with premium skins and template, and also easy to create your very own custom templates for your slider.

Minimum Server Requirements

  • WordPress 4.0 or greater
  • PHP version 5.2.4 or greater
  • MySQL version 5.0 or greater

Installing by WP plugin installer

  1. Extract the zip file which you’ve downloaded from Tonjoostudio.com.
  2. Navigate to Plugins > Add New page in your WordPress admin.
  3. Click on the Upload button on the top.
  4. Click on Choose File and choose “sangar-slider-premium.zip” file from extracted zip file. then hit the Install Now button.
  5. Now you should see “Master Slider WP” in plugins list. Click on the Activate Plugin to activate Master Slider WP.

Installing using FTP

First, you need a tool for uploading plugin files to your site, you can use filemanager from cPanel or any FTP clients. Some good FTP clients :

  • FileZilla for Linux/windows.
  • Cyberduck for Mac.
  1. Extract the zip file which you’ve downloaded from Tonjoostudio.com.
  2. Open extracted folder and extract “sangar-slider-premium.zip” file, after extract you should see “sangar-slider-premium” folder.
  3. Connect to you server by FTP application then navigate to /wp-content/plugins/.
  4. Upload the “sangar-slider-premium” folder which extracted.
  5. Login to your WordPress admin area and navigate to the Plugins page, then click the Activate below Sangar Slider.

Auto update

Auto update is simple and easy. Just go to Sangar Slider settings > Enter your Sangar Slider License. Then Auto update will apear in Plugin page.

9qu6zhn

Creating New Slide

  1. Click Sangar Slider > Add Slider
  2. Type slider title
  3. Choose your template
  4. Click “Create New Slide”

1

 

2

You can use pre-installed preset if you want to, or you can create your own preset manually

 

3

Layer editor is essential part of Sangar Slider. Here, you can add slider, adjust its position with intuitive drag-n-drop design.

1. “Add Layer” to add new layer on grid

2. Click “Refresh Grid” after you make change on grid width, so it will reset to newest setting

3. “Animate” to simulate layer animation in front-end

4. “Grid” switcher, to display grid on layer editor

5. “Toolbox” switcher to display layer content toolbox (Such as Text, Image, Code, Video, etc.)

6. “Toolbox” box is essential tool set for layer editor. Here you can add Text, Code, Video, Image to layer editor. We will talk more about Toolbox in the next section.

4

Mobile layer editor is just like Desktop layer editor. The only difference is, it’s for mobile view :

10

Background – Image

  1. Choose “image” as background
  2. [optional] Type your slide link
  3. Click Set Image, and browse your image. Then upload
  4. Click Save Slide

background-image

Background – Solid Color

  1. Choose “Solid Color” as background
  2. [optional] Type your slide link
  3. Type your HTML Hex color
  4. Click Save Slide

background-color

Background – Video (HTML5)

  1. Choose “Video” as background
  2. [optional] Type your slide link
  3. Click Set Video, and browse your video. Then upload
  4. Click Set Video Poster, and browse your video image poster. Then upload

background-video-1

background-video-2

Background – Video (Youtube/Vimeo)

  1. Choose “Youtube & Vimeo” as background
  2. [optional] Type your slide link
  3. Copy and paste your Youtube or Vimeo embed source (start with iframe)
  4. Click Save Slide

background-video-youtube-vimeo

Background – HTML

  1. Choose “HTML” as background
  2. [optional] Type your slide link
  3. Type your HTML content here
  4. Click Save Slide

background-html

Enable animation for better user experience. Animation Type is for animation slide direction. Animation duration is in milisecond, and animation stagger is animation delay time beetwen items :

1. “Animation” dropdown, where do you want to display your animation. Desktop only, mobile only, or both.

2. “Animation Type”

3. “Animation Duration” in milisecond

4. “Animation Stagger” time between items to do the animations

11

1. Full Width : Resize the slideshow to full width based on container width

2. Full Height : Resize the slideshow to full height based on web browser height, exclude the top position

3. Minimum Height : Minimum Height of slider on container when resized

4. Maximum Height : Maximum Height of slider on container when resized (Set to 0 (zero) to make it unlimited max height)

advance-1

1. Mobile Treshold : Width dimension treshold between desktop and mobile mode

2. Mobile Dimension : If you choose “Same as default base dimension”, then your mobile slider dimension will be same with desktop dimension. But if you choose “Use custom size”, then you need to adjust custom size “Mobile Width” and “Mobile Height”.

3. Mobile Width : Default mobile width dimension. Need to adjust if “Mobile Dimension” set to “Use custom size”.

4. Mobile Height : Default mobile height dimension. Need to adjust if “Mobile Dimension” set to “Use custom size”.

5. Mobile Full Content Box : Set mobile content/layer to full size on mobile.

advance-2

Content  – Text

  1. Choose Text as Content Type
  2. Type your content here

content-text

Content – Text & Button

  1. Choose Text & Button as Content Type
  2. Type your content here
  3. Type your button text/caption
  4. Type your button link

content-button

Content – HTML

  1. Choose HTML as Content Type
  2. Type your HTML content here

content-html

Content Options

  1. Content Position Preview: Here, you can see the preview of your content position setting
  2. Content Position: Choose your content position using this dropdown setting
  3. Content Width: The width of your content. You can also see the preview of it at content position preview (Point 1)
  4. Content Padding
  5. Content Background: Background for your content box. You can choose Transparent, Solid Color, or none.

content-position content-position-2

Empty tab. Edit page to add content here.

Sidebar – Dimension

  • Slider Width
    Set your slider width by pixel
  • Slider Height
    Set your slider height by pixel

Sidebar-Dimension

Sidebar- Animation

  • Animation Speed
    Set animation speed between transitions by milisecond
  • Time Between Transitions
    Set timer for transitions between slide by milisecond

Sidebar-Animation

Sidebar – Timer

  • Pause on Hover
    Set Yes if you want to enable Pause when mouse hover the slide. Default is Yes.
  • Start on Mouse Out
    Set Yes if you want start the slider when mouse out. Default is Yes.
  • Timer After Mouse Out
    Set the time after the mouse out by milisecond.

Sidebar-Timer

Sidebar-DirectionalNavigation

Sidebar – Pagination

  • Pagination Content Width
    Set the slider pagination width by pixel. Default is 120

Sidebar-Pagination

Sidebar – Behaviour

  • Continous Sliding
    Set Yes to make auto-slideshow.
  • HTML5 Video Next On Ended
    Set Yes to make next auto-play HTML5 video when video ended.

Sidebar-Behaviour