=== Juna-IT Slider === Contributors: Juna-IT Donate link: http://juna-it.com/index.php/photo-slider/ Tags: gallery, image, image slider, images, jquery, layer, responsive, shortcode, slider, slideshow, swipe, widget Requires at least: 3.0.1 Tested up to: 4.4.2 Stable tag: 1.0.5.2 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Revolutionary slider from Juna IT. This slider is different from all of its charm. In WordPress sliders Our slider gives you many useful functions. == Description == ### Configurations * [URL](http://juna-it.com/index.php/photo-slider/) * [Demo Version]( http://juna-it.com/index.php/image-slider-demo) * [FAQ](https://wordpress.org/plugins/slider-image-responsive/faq/) * [Support Forum](http://juna-it.com) #### WordPress Demo Version 6 ways to demonstrate images will make you satisfy with the look of your slider. Among the views you can find. * Juna-IT Slider * Full Width Slider * Different Size Slider * Vertical Thumbnail Slider * Horizontal Thumbnail Slider * Thumbnail Slider Slider Image options for 6 views > #### Juna-IT Slider Demo Version >[* Juna-IT Slider - Demo Version ](http://juna-it.com/index.php/image-slider-demo/) > >[* Full Width Slider - Demo Version ](http://juna-it.com/index.php/full-width-slider-demo/) > >[* Different Size Slider - Demo Version](http://juna-it.com/index.php/different-size-slider/) > >[* Vertical Thumbnail Slider - Demo Version](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery/) > >[* Horizontal Thumbnail Slider - Demo Version](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery/) > >[* Thumbnail Slider - Demo Version](http://juna-it.com/index.php/slider-thumbnail-slider-gallery/) > Slider Image General Options are available for commercial version users. Here are 5 views (Juna-IT Slider, Full Width Slider, Different Size Slider, Vertical Thumbnail Slider, Horizontal Thumbnail Slider, Thumbnail Slider), which customization can be done from general options. Customize your slider according to your website, it gives you opportunities to change ratings styles, pagination styles, load more styles for your slider image. WordPress Slider Image Responsive Plugin is one of the best in WordPress Slider plugin category. Considering the large number of plugins in WordPress, Juna-IT company day by day will improve and enhance the functionality of products, and keep on adhering to the first position among WordPress Slider Image Responsive plugins. Juna-IT Slider Image Responsive is a WordPress Slider Plugin designed to create Elegant and Beautiful Slider Image Responsive Albums along with Images. Creating beautiful and elegant slideshows with photo slider plugin is fast and really easy. Photo Slider plugin is created for the people, who want Photo Slider to be screened for their website by different design and beauty. now you can also add any Image. Photo Slider plugin is created for the people, who want Photo Slider to be screened for their website by different design and beauty. now you can also add any Image. Simple and easy to use slider interface allows you to create sliders in mere seconds simply select images from gallery add layers and your slider is ready. Slider's sleek animations gives professional and modern look to your website. So We are sure your Photo Slider will always satisfy you. Each of the versions are made by specific style according to your preference and corresponding to your website. Photo Slider plugin is a real miracle. The product includes plugin for adding Photo Sliders and albums to posts and pages, as well as multiple widgets. Completely responsive Slider plugin use Shortcodes to embed Slideshows in your website. ### The features of the slider * Possibility of adding unlimited sliders and unlimited slides for each slider Image. * Possibility to add URL to tailor specific pages to the slider. * Smart target feature, so that inner links will open up within the page, whereas outsourced links will open in a new page. * Autoplay configurations. * Touch Swipe Navigation. * Drag and drop slider creation. * Fully responsive and Mobile features - Advanced mobility gallery. Slider implemented with advanced settings for different devices screen size. * Visual slide editor with zoom and desktop, tablet and mobile models. * Slide background image with transparent color overlay. * Shortcode for easy insert of the slider into post/pages. * Possibility to provide titles for the slides. * Extremely user friendly admin panel. * Slide pause on mouse over. * Layer Delay Time. * Layer Text Size. * Layer Text color. * Layer Background Color. * Possibility to use different sliders for different pages. * Possibility to change design for the bullets, navigation buttons. * Design customization for almost all features. * Possibility of sorting the Image. * Multiple Image Uploader. * Enable/Disable Slider Title. * Enable/Disable Slide Title. * Enable/Disable Slide Description. * Enable/Disable Navigation Bullets. * Enable/Disable Slide Thumbnails. The powerful plugin settings panel makes deep customization possible. It means that the interface is adaptive, user can add or remove slider navigator, slider arrow navigator , or any decoration interface. When touch the Slide, it will freeze and then move to the direction that finger swipes to. ### Fully Responsive Plugin can be used on different mobile devised as it’s flexible for any screen size. As a very important feature – responsiveness is on title and description of the slider as well. ### Compatible Browsers * IE8+ * Firefox * Safari * Opera * Chrome * iOS browser * Android browser Beyond the features mentioned above, there are lots of other WordPress slider features inside of the plugin. You gain the benefit of an intuitive user interface that makes slider management easy, simple to understand slider options, and a plethora of hooks and filters to manipulate the slider output. ### Why Choose this Plugin? Soliloquy is the best choice for a WordPress slider plugin because it is fast, extremely intuitive and super easy to use. You can get your slider going in just a matter of seconds. In fact, take a look at how easy it is to create a WordPress slider. ### Shortcode * Shortcode: Using [Juna_Photo_Slider id="N"] shortcode, you can publish slider image in any Page or Post in your WordPress sites. Copy & paste the shortcode directly into any WordPress post or page. * Templete Include: Using shortcode, you can publish slider image in any Page or Post in your WordPress sites. Copy & paste this code into a template file to include the slideshow within your theme. If in this plugin you have found a mistake, or if you have some question , please read support. if there is no information which can help you, do not be ashamed, click here to contact us and ask your question Thanks for downloading and installing plugin. You can show your appreciation and support future development 6 ways to demonstrate images will make you satisfy with the look of your slider. Among the views you can find. * Juna-IT Slider * Full Width Slider * Different Size Slider * Vertical Thumbnail Slider * Horizontal Thumbnail Slider Slider Image options for 6 views > #### Juna-IT Slider Demo Version >[* Juna-IT Slider - Demo Version - 1](http://juna-it.com/index.php/image-slider-demo/) >[* Juna-IT Slider - Demo Version - 2](http://juna-it.com/index.php/juna-it-slider-image-2/) >[* Juna-IT Slider - Demo Version - 3](http://juna-it.com/index.php/juna-it-slider-image-3) >[* Juna-IT Slider - Demo Version - 4](http://juna-it.com/index.php/juna-it-slider-image-4/) >[* Juna-IT Slider - Demo Version - 5](http://juna-it.com/index.php/juna-it-slider-image-5/) > #### Full Width Slider Demo Version >[* Full Width Slider - Demo Version - 1](http://juna-it.com/index.php/full-width-slider-demo/) >[* Full Width Slider - Demo Version - 2](http://juna-it.com/index.php/slider-full-width-slider-demo-1/) >[* Full Width Slider - Demo Version - 3](http://juna-it.com/index.php/slider-full-width-slider-demo-2/) >[* Full Width Slider - Demo Version - 4](http://juna-it.com/index.php/slider-full-width-slider-demo-3/) >[* Full Width Slider - Demo Version - 5](http://juna-it.com/index.php/slider-full-width-slider-demo-4/) > #### Different Size Slider Demo Version >[* Different Size Slider - Demo Version - 1](http://juna-it.com/index.php/different-size-slider/) >[* Different Size Slider - Demo Version - 2](http://juna-it.com/index.php/different-size-slider-2/) >[* Different Size Slider - Demo Version - 3](http://juna-it.com/index.php/different-size-slider-3) >[* Different Size Slider - Demo Version - 4](http://juna-it.com/index.php/different-size-slider-4) >[* Different Size Slider - Demo Version - 5](http://juna-it.com/index.php/different-size-slider-5/) > #### Vertical Thumbnail Slider Demo Version >[* Vertical Thumbnail Slider - Demo Version - 1](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery/) >[* Vertical Thumbnail Slider - Demo Version - 2](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-2/) >[* Vertical Thumbnail Slider - Demo Version - 3](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-3/) >[* Vertical Thumbnail Slider - Demo Version - 4](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-4/) >[* Vertical Thumbnail Slider - Demo Version - 5](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-5/) > #### Horizontal Thumbnail Slider Demo Version >[* Horizontal Thumbnail Slider - Demo Version - 1](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery/) >[* Horizontal Thumbnail Slider - Demo Version - 2](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-2/) >[* Horizontal Thumbnail Slider - Demo Version - 3](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-3/) >[* Horizontal Thumbnail Slider - Demo Version - 4](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-4/) >[* Horizontal Thumbnail Slider - Demo Version - 5](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-5/) > #### Thumbnail Slider Demo Version >[* Thumbnail Slider - Demo Version - 1](http://juna-it.com/index.php/slider-thumbnail-slider-gallery/) >[* Thumbnail Slider - Demo Version - 2](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-2/) >[* Thumbnail Slider - Demo Version - 3](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-3/) >[* Thumbnail Slider - Demo Version - 4](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-4/) >[* Thumbnail Slider - Demo Version - 5](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-5/) Install and enjoy! == Installation == ### First download plugins ZIP file. 1. Go to Plugins page, and add new plugin 2. Then go to Plugins page Add New > Upload Plugin 3. Click "Choose file" then select the - Juna-IT-Photo-Slider.zip file 4. Then Install and activate the plugin 5. That's all, now you can build Slider forms. If any problem occurs, contact us at [junait.com@gmail.com](mailto:junait.com@gmail.com). == Frequently Asked Questions == * **Is Juna-IT Slider Image is totally responsive?** Juna-IT Slider Image is 100% responsive with each items, so it will fit perfectly into your page, regardless of the size of your desktop screen or device. * **Can I add slider into the theme in a custom location?** Yes, that’s possible to achieve. The plugin automatically generates a shortcode and php code for each slider, thus you can copy and paste the php code for the slider to a custom location. The shortcode and php codes are listed next to the slider in Slider-Image-Responsive>Slider section. * **How to get a copy of most recent version slider?** Slider-Image Pro users can get update versions contacting us by [junait.com@gmail.com.] (mailto:junait.com@gmail.com). Free version users will find update notification in their wordPress admin panel. * **What options does the Juna-IT Slider use during the slide transition?** The slider can be set to autoplay or display arrows on hover for switching in between the slides. There is a possibility of displaying a timer bar, which will indicate the timing in between the slides. * **I have paid for pro version slider and didn’t get the link or file to update.** If you made purchase slider and didn’t get the file, or file was corrupt, contact us by [junait.com@gmail.com.] (mailto:junait.com@gmail.com) and send “order number”, we will check and send you the file as soon as possible. * **Can I use the Juna-IT Slider-Image-Responsive to create different sliders for different pages?** Yes, you can create unlimited number of sliders with unlimited amount of slides. Then you can paste the corresponding slider code within each page.The slider shortcodes are listed next to the slider in Juna-IT Slider>Slider section. * **Have purchased pro version slider-image still get the announcement to buy the commercial version to change settings. What to do?* This can happen because of your browser’s cache files. Press ctrl+f5 (Chrome, FF) in order to clean them, if you use safari, etc., clean from browser settings * **Will I lose all my changes that I made in slider free version, if I update to pro version?** All kind of changes made in free version slider-image will remain, even if you delete the plugin. * **How to change “New Slider” name?** In order to change Slider name just click on it’s name (on top tabs). * **I have already purchased slider Personal version, how do I upgrade it to Developer version, without buying it again?** If you have any pro version our slider plugin of our products and want to upgrade it, you do not need to buy the new slider once again, you only need to pay the difference price. For that simply contact [junait.com@gmail.com.] (mailto:junait.com@gmail.com) or our online chat and we will help you to pay the difference. * **Can I stop auto slide in slider? Yes. Auto slide is stoppable, but putting a huge number on "pause time" option will force visitors slide manually. * **Can I have full width slider in Slider?** If you put size on slider it won't be more than your entry-content size. make sure that your entry-content is also full-width. * **Is the payment for plugin one-time of per month,year..?** The payment for Pro license slider is one-time and for life. * **How to install the PRO version of plugin slider responsive?** In order to install pro version of the plugin, simply follow these steps: * delete your free version of slider plugin. * install the slider-image-responsive.zip file | Plugins > add new > upload plugin * clean your cache files |ctrl+f5| Don’t be afraid of deleting free version, because you will NOT lose your created sliders image. * **I’ve bought the commercial license of the plugin installed the file but the Plugin seems to be still in free version slider-image, what to do?** After installation of pro version, in General Options all your changes will be saved! If you still see “free version slider” notification after installation of pro version. * try to clean your cache files if this will not help * delete, and install the plugin again * **Slider moves/jumps for the first seconds, while site is loading, why?** That is standard loading process. Our slider-image is made so it waits until all your page components will be loaded then it loads itself. That’s why we created loading icons which will cover that movement moment. Please put it ON from Current Options. * **How can I add title/dots out of the slider under it or below it?** All attributes, like title or dots will be inside the slider, because out area doesn't belong to the slider. * **The slider images are white, why?** This is most common theme conflict problem. There are errors in site/theme, or some other external reason, our support team fix this very quickly, if you contact [junait.com@gmail.com.] (mailto:junait.com@gmail.com). * **How can I add images to slider?** You can either upload the images using Media Upload option or provide the absolute URL of the images to be used within the slider. * **How can you change the order of images (slides responsive) within Juna-IT Slider?** Juna-IT Slider uses easy drag and drop feature. This allows to order the slides for each slider from the back end. For easier navigation you can name the slides. * **Does Juna-IT Slider support Google fonts?** Juna-IT Slider supports Google Fonts. This shall allow users to add custom fonts over slides as layers using the big variety of Google fonts. * **What should I do when I see blank area where the slider should show or the slider doesn't work?** It means that there is a JavaScript error on your site which blocks other scripts(for example Juna-IT Slider's scripts). You can open up the browser debugger window with F12 button and check the console if it shows error or not. If you solve these errors Juna-IT Slider should work fine. Usual problem is that you have the latest WordPress version, but your theme loads very old jQuery version (1.7 or older) and the WordPress admin bar throws a JavaScript error. In this case, you have to remove the old jQuery from your theme's functions.php. If you are unable to solve these problems, feel free to [contact us!] (mailto:junait.com@gmail.com) * **I plan to add 30+ images in my slideshow. Does Juna-IT Slider allow it? Should all images be pre-loaded before slideshow will start the playing?** You should use "On-demand image loading" option in this case. Only first image should be pre-loaded and slideshow will start. All other images will be loaded during the playing. **Can I see demo of calendar? Check out our demo Calendar.** Slider Image options for 6 views **Juna-IT Slider Demo Version** [* Juna-IT Slider - Demo Version - 1](http://juna-it.com/index.php/image-slider-demo/) [* Juna-IT Slider - Demo Version - 2](http://juna-it.com/index.php/juna-it-slider-image-2/) [* Juna-IT Slider - Demo Version - 3](http://juna-it.com/index.php/juna-it-slider-image-3) [* Juna-IT Slider - Demo Version - 4](http://juna-it.com/index.php/juna-it-slider-image-4/) [* Juna-IT Slider - Demo Version - 5](http://juna-it.com/index.php/juna-it-slider-image-5/) **Full Width Demo Version** [* Full Width Slider - Demo Version - 1](http://juna-it.com/index.php/full-width-slider-demo/) [* Full Width Slider - Demo Version - 2](http://juna-it.com/index.php/slider-full-width-slider-demo-1/) [* Full Width Slider - Demo Version - 3](http://juna-it.com/index.php/slider-full-width-slider-demo-2/) [* Full Width Slider - Demo Version - 4](http://juna-it.com/index.php/slider-full-width-slider-demo-3/) [* Full Width Slider - Demo Version - 5](http://juna-it.com/index.php/slider-full-width-slider-demo-4/) **Different Size Demo Version** [* Different Size Slider - Demo Version - 1](http://juna-it.com/index.php/different-size-slider/) [* Different Size Slider - Demo Version - 2](http://juna-it.com/index.php/different-size-slider-2/) [* Different Size Slider - Demo Version - 3](http://juna-it.com/index.php/different-size-slider-3) [* Different Size Slider - Demo Version - 4](http://juna-it.com/index.php/different-size-slider-4) [* Different Size Slider - Demo Version - 5](http://juna-it.com/index.php/different-size-slider-5/) **Vertical Thumbnail Demo Version** [* Vertical Thumbnail Slider - Demo Version - 1](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery/) [* Vertical Thumbnail Slider - Demo Version - 2](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-2/) [* Vertical Thumbnail Slider - Demo Version - 3](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-3/) [* Vertical Thumbnail Slider - Demo Version - 4](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-4/) [* Vertical Thumbnail Slider - Demo Version - 5](http://juna-it.com/index.php/slider-vertical-thumbnail-slider-gallery-5/) **Horizontal Thumbnail Demo Version** [* Horizontal Thumbnail Slider - Demo Version - 1](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery/) [* Horizontal Thumbnail Slider - Demo Version - 2](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-2/) [* Horizontal Thumbnail Slider - Demo Version - 3](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-3/) [* Horizontal Thumbnail Slider - Demo Version - 4](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-4/) [* Horizontal Thumbnail Slider - Demo Version - 5](http://juna-it.com/index.php/slider-horizontal-thumbnail-slider-gallery-5/) **Thumbnail Slider Demo Version** [* Thumbnail Slider - Demo Version - 1](http://juna-it.com/index.php/slider-thumbnail-slider-gallery/) [* Thumbnail Slider - Demo Version - 2](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-2/) [* Thumbnail Slider - Demo Version - 3](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-3/) [* Thumbnail Slider - Demo Version - 4](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-4/) [* Thumbnail Slider - Demo Version - 5](http://juna-it.com/index.php/slider-thumbnail-slider-gallery-5/) == Screenshots == 1. Admin Page 2. Admin Page 11. Admin Page 12. Admin Page / New Image 22. General Options 23. Juna-IT 33. Juna-IT 34. Juna-IT == Changelog == = Image Slider, List Version 1.0.5.2 = * Update Slider free version = Image Slider, List Version 1.0.5.1 = * Fully Responsive Image Slider = Image Slider, List Version 1.0.5 = * Added new Gallery Slider type: 'Thumbnail Slider' = Image Slider, List Version 1.0.4 = * Added new Gallery Slider type: 'Horizontal Thumbnail Slider' * bug fixed in slider * Add new icons in Image Slider = Image Slider, List Version 1.0.3 = * Added new Gallery Slider type: 'Vertical Thumbnail Slider' * Loading icon added and bug fixed in image slider = Image Slider, List Version 1.0.2 = * Added new Gallery Slider type: 'Different Size Slider' * added possibility to change slider options when we insert the slider Shortcode in our posts/pages * added Drag and Drop functionality * bug fixed in slider = Image Slider, List Version 1.0.1 = * sdded new Gallery Slider type: 'Full Width Slider' * added widget slider * bug fixed in slider = Image Slider, List Version 1.0.0 = * Adding Photo Slider by Juna-IT ==Other comments== ### WordPress Image Slider Step by step guide **Step 1: Installing the Slider** * Minimum requirements. * WordPress 3.4+ * PHP 5.x * MySQL 5.x Perform a new installation. Log in to the administrator panel. Go to Plugins Add > New > Upload. Click Choose file (Browse) and select the Image-Slider.zip file. Click Upload&Install button. Click Activate Plugin button for activating the plugin. If the installation succeeded you will see the success message. If any problem occurs, please click here to [contact us.](mailto:junait.com@gmail.com) == WordPress Add an Image Slider == Of this admin page you may start creating your Slider, add new Image Slider pressing on "add new" Image Slider. ### Step 1 Creating an Image Slider **Starting to create our Image Slider** * As a first step you should specify the name of the slider. * Slider Name. Provide a name for the slider. * Below you will be able to add slides. ### Add unique Title to your images, to complete your slider. * **Image Title** - Important possibility to add title to each image in the gallery. The Image title can be seen not in all views, but some of them have a place for it. Image Slider accomplished with title looks rich and perfect. * **Add images from Media Library** - You can select images to use within the slider which are currently uploaded to your Media Library by clicking on those and pressing " Insert into post " button. In addition, you can upload new files, navigating to the Upload Files tab on the left. Then press Select Files button, choose the image and press Insert button. This way the image will be added to the slider. **Add Image URL** - You can also add images providing the absolute link to it. Press Add Image URL, provide the link and press Add button. This will be useful for adding images to the slider without the need of downloading those and uploading again. **Add Image** - In addition to images, you can instead use images within the slider from web site URL. You should click on the Add Image button, provide the link to the image and press Add button. The image associated with the web site image will be automatically displayed as a slider image. **Remove** - You can use Remove button to remove the slider image. * **Link** - You can add a link to another page that is related to the image slider. * **Image Slider Open in New Tab** - Choose whether to publish "" or not. * **Press Save button.** **Quantity Images are unlimited. Quantity depends on your wishes. If you want to add one more you must click on "Add New Image". By clicking the button below you will see a sequence of windows. If you want to delete one of the creatures Sliders clicking on the icon at the top of the bin will be deleted.** If you are finished slider creation and want to keep it, in the upper right side you'll see the SAVE button. Clicking on it will be Saved. After This in admin page you will see Image Slider created by you. ### Slider Manager. **After you created Image Slider on the Slider manager are 6 blocks.** * No - Here is located the number Of your slider. * Slider Title - Here you will see slider title wrote by you. * Quantity Image Slider - How many Images you created. * Type - Determine preferable type of your image slider. * Shortcode (Templete Include) - Here you will see sliders shortcode which you can copy and Paste[Juna_Photo_Slider id="N"] where you want to see your slider. * * Actions - Edit. Press Edit you can make some changes, if you want to add or remove anything on slider. * Actions - Delete: Press Delete image slider created by you will delete. ### Slider General Options Starting to create an effect. * As a first step you should specify the name of the slider. * Slider Name. Provide the name. * Below you will be able to change slider options. ### General option * **Autoplay** - Choose whether to autoplay the sliders or not. * **Change speed** - Specify the change speed in milliseconds. * **Pause time** - Set the time interval for the change of the sliders in milliseconds. * **Slider Duration** - Set the time interval for the change of the slider duration. * **Slider Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Arrow Steps** - Set the arrow steps to change slider image. ### Container Options * **Image width** - Define the gallery width for the mmage browser view option. * **Image height** - Specify the gallery image height for the image browser view option. * **Border Width** - Set the width of borders. * **Border style** - Choose the style to be applied to the border of the sliders. * **Border style** - Select the border style for the images. * **Border Color** - Choose the color of the slider main border. * **Border Radius** - Define the radius of the slider main border. ### Image Title Options * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define the font size for the image title. * **Font family** - Specify the font family for the text used with the slider. * **Title Text Align** - Set the location of the title in the box in slider . * **Color** - Select color tune it with your image slider * **Background Color** - Here you can select your favourite background color for slider title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify the preferable position of the title. You can drag and drop the text layer to a desired position. ### Navigator Options * **Slideshow Navigation** - Select between the option of always displaying the navigation or not. * **Color** - Select a color for the navigation. * **Hover color** - Select a hover color for the navigation. * **Current Color** - Specify the color of the dot for the currently displayed image slider. * **Border color** - Select the color for the border in slider navigation. * **Border radius** - Select the border radius of the navigation. * **Navigation position** - Set the position of the navigation. * **Position From Left** - Define the position of the title using the view graph. ### Choose Icons for Slider * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 9 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. ### Arrows Options in Slideshow * **SliderShow Arrows** - Select option of always displaying the navigation or not in slider. * **Slider icon color** - Slider element's image-slider Overlay color. Select a color for the overlay on the slider as you hold the mouse arrow on it. * **Slider icon size** - Alter the size of the icon regardless of the container (px) * **Position From top in Slider icon** - Specify the preferable position of the slideshow icon. You can drag and drop the text layer to a desired position. ### Loading Icon * **Select Icon in Slider** - There are 19 types of animation in “ Image Slider ” * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Full Width Slider** * **Autoplay** - Choose whether to autoplay the responsive sliders or not. * **Change speed** - Specify the change speed in milliseconds. * **Slider Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Slide Spacing Color** - Your slider image can also have spacing color and this option allows to choose the exact color for that background. You can just click on the color which you'd like to have as a slide spacing and choose your favorite color. * **Pause time in Sliders** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. * **Slider background Color** - Select background color for image. The color will be visible with during the slide change within specific effects. ### Slider Options * **Image width** - Define gallery width for slider image view. * **Image height** - Specify gallery height for slider image view. * **Border Width** - Set the width of borders. * **Border style** - Choosestyle to be applied to border of sliders. * **Border Color** - Choose color of sliders main border. * **Border Radius** - Define radius of sliders main border. * **Slide Cols** - Define how many images do you want to see in your slides at once. * **Slider radius** - Choose radius for slider images. **Photo title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define the font size for the image title. * **Font family** - Specify the font family for the text used with the slider. * **Title Text Align** - Set the location of the title in the box in slider . * **Color** - Select color tune it with your image slider * **Background Color** - Here you can select your favourite background color for slider title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify the preferable position of the title. You can drag and drop the text layer to a desired position. ### Navigator Options * **Slideshow Navigation** - Select between the option of always displaying the navigation or not. * **Color** - Select a color for the navigation. * **Hover color** - Select a hover color for the navigation. * **Current Color** - Specify the color of the dot for the currently displayed image slider. * **Border color** - Select the color for the border in slider navigation. * **Border radius** - Select the border radius of the navigation. * **Navigation position** - Set the position of the navigation. * **Position From Left** - Define the position of the title using the view graph. * **Navigation size** - Define size of navigation bullets. ### Choose Icons for Slider * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 9 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. ### Arrows Options in Slideshow * **SliderShow Arrows** - Select option of always displaying the navigation or not in slider. * **Slider icon color** - Slider element's image-slider Overlay color. Select a color for the overlay on the slider as you hold the mouse arrow on it. * **Slider icon size** - Alter the size of the icon regardless of the container (px) * **Position From top in Slider icon** - Specify the preferable position of the slideshow icon. You can drag and drop the text layer to a desired position. ### Loading Icon * **Select Icon in Slider** - There are 19 types of animation in “ slider image ” * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Vertical Thumbnail Slider** **Slider General Options** * **AutoPlay** - Autoplay - Choose whether to autoplay the slider slideshow or not. * **Slider Change Speed** - Change speed - Specify the change speed in milliseconds. * **Slide Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Background color** - Select background color for slider. * **Autoplay Steps** - Set autoplay steps to change slider. * **Pause time in Sliders** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. **Slider Options** * **Slider Width** - Specify width of the slider in pixels. * **Border Width** - Set the width of borders. * **Border Color** - Choose border color of slider. * **Image Radius** - Define radius of slider main image. * **Height** - Specify width of the slider in pixels. * **Image Border style - Select border style for main image. * **Image Title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define font size for image title. * **Font family** - Specify font family for text used with the image in slider. * **Title Text Align** - Set location of title in box in slider. * **Color** - Select color tune it with your slider image. * **Image Background Color - Here you can select your favourite background color for image title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify preferable position of title. You can drag and drop text layer to desired position. **Navigator Options** * **Border radius** - Select border radius of image navigation. * **Border color** - Select color for border in slider navigation. **Choose Icons for Slider** * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 9 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. **Arrows Options in Slideshow** * **Slider Show Arrows** - Choose whether to show arrows the images or not in slider. * **Color** - Slider element's image-slider Overlay color. Select a color for the overlay on the slider as you hold the mouse arrow on it. * **Size** - Alter size of icon regardless of container (px) * **Position From Top** - Specify preferable position of icon. You can drag and drop icons to desired position. **Loading Icon** * **Select Icon in Slider** - There are 19 types of animation in " Slider Image " * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Horizontal Thumbnail Slider** **Slider General Options** * **AutoPlay** - Autoplay - Choose whether to autoplay the slider slideshow or not. * **Slider Change Speed** - Change speed - Specify the change speed in milliseconds. * **Slide Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Background color** - Select background color for slider. * **Autoplay Steps** - Set autoplay steps to change slider. * **Pause time** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. **Slider Options** * **Slider Width** - Specify width of the slider in pixels. * **Border Width** - Set the width of borders. * **Border Color** - Choose border color of slider. * **Image Radius** - Define radius of slider main image slider. * **Height** - Specify width of the slider in pixels. * **Image Border style - Select border style for main image slider. * **Image Title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define font size for image title. * **Font family** - Specify font family for text used with the image in slider. * **Title Text Align** - Set location of title in box in slider. * **Color** - Select color tune it with your slider image. * **Image Background Color - Here you can select your favourite background color for image title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify preferable position of title. You can drag and drop text layer to desired position. **Navigator Options** * **Border radius** - Select border radius of image navigation. * **Border color** - Select color for border in slider navigation. **Choose Icons for Slider** * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 18 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. **Arrows Options in Slideshow** * **Slider Show Arrows** - Choose whether to show arrows the images or not in slider. * **Position From Top** - Specify preferable position of icon. You can drag and drop icons to desired position. **Loading Icon** * **Select Icon in Slider** - There are 19 types of animation in Slider Image * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Thumbnail Slider** **Slider General Options** * **AutoPlay** - Autoplay - Choose whether to autoplay the slider slideshow or not. * **Slider Change Speed** - Change speed - Specify the change speed in milliseconds. * **Slide Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Background color** - Select background color for slider. * **Autoplay Steps** - Set autoplay steps to change slider. * **Pause time** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. **Slider Options** * **Slider Width** - Specify width of the slider in pixels. * **Border Width** - Set the width of borders. * **Border Color** - Choose border color of slider. * **Image Radius** - Define radius of slider main image slider. * **Height** - Specify width of the slider in pixels. * **Image Border style - Select border style for main image slider. * **Image Title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define font size for image title. * **Font family** - Specify font family for text used with the image in slider. * **Title Text Align** - Set location of title in box in slider. * **Color** - Select color tune it with your slider image. * **Image Background Color - Here you can select your favourite background color for image title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify preferable position of title. You can drag and drop text layer to desired position. **Navigator Options** * **Slideshow Navigation** - Select between the option of always displaying the navigation or not. * **Color** - Select a color for the navigation. * **Background color** - Select background color for navigation. * **Current Color** - Specify the color of the dot for the currently displayed image slider. * **Border color** - Select the color for the border in slider navigation. * **Border radius** - Select the border radius of the navigation. * **Navigation position** - Set position of navigation in slideshow. **Choose Icons for Slider** * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 18 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. **Arrows Options in Slideshow** * **Slider Show Arrows** - Choose whether to show arrows the images or not in slider. * **Position From Top** - Specify preferable position of icon. You can drag and drop icons to desired position. **Loading Icon** * **Select Icon in Slider** - There are 19 types of animation in Slider Image * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. ### Step 1 Creating an Image Slider **Starting to create our Image Slider** * As a first step you should specify the name of the slider. * Slider Name. Provide a name for the slider. * Below you will be able to add slides. ### Add unique Title to your images, to complete your slider. * **Image Title** - Important possibility to add title to each image in the gallery. The Image title can be seen not in all views, but some of them have a place for it. Image Slider accomplished with title looks rich and perfect. * **Add images from Media Library** - You can select images to use within the slider which are currently uploaded to your Media Library by clicking on those and pressing " Insert into post " button. In addition, you can upload new files, navigating to the Upload Files tab on the left. Then press Select Files button, choose the image and press Insert button. This way the image will be added to the slider. **Add Image URL** - You can also add images providing the absolute link to it. Press Add Image URL, provide the link and press Add button. This will be useful for adding images to the slider without the need of downloading those and uploading again. **Add Image** - In addition to images, you can instead use images within the slider from web site URL. You should click on the Add Image button, provide the link to the image and press Add button. The image associated with the web site image will be automatically displayed as a slider image. **Remove** - You can use Remove button to remove the slider image. * **Link** - You can add a link to another page that is related to the image slider. * **Image Slider Open in New Tab** - Choose whether to publish "" or not. * **Press Save button.** **Quantity Images are unlimited. Quantity depends on your wishes. If you want to add one more you must click on "Add New Image". By clicking the button below you will see a sequence of windows. If you want to delete one of the creatures Sliders clicking on the icon at the top of the bin will be deleted.** If you are finished slider creation and want to keep it, in the upper right side you'll see the SAVE button. Clicking on it will be Saved. After This in admin page you will see Image Slider created by you. ### Slider Manager. **After you created Image Slider on the Slider manager are 6 blocks.** * No - Here is located the number Of your slider. * Slider Title - Here you will see slider title wrote by you. * Quantity Image Slider - How many Images you created. * Type - Determine preferable type of your image slider. * Shortcode (Templete Include) - Here you will see sliders shortcode which you can copy and Paste[Juna_Photo_Slider id="N"] where you want to see your slider. * * Actions - Edit. Press Edit you can make some changes, if you want to add or remove anything on slider. * Actions - Delete: Press Delete image slider created by you will delete. ### Slider General Options Starting to create an effect. * As a first step you should specify the name of the slider. * Slider Name. Provide the name. * Below you will be able to change slider options. ### General option * **Autoplay** - Choose whether to autoplay the sliders or not. * **Change speed** - Specify the change speed in milliseconds. * **Pause time** - Set the time interval for the change of the sliders in milliseconds. * **Slider Duration** - Set the time interval for the change of the slider duration. * **Slider Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Arrow Steps** - Set the arrow steps to change slider image. ### Container Options * **Image width** - Define the gallery width for the mmage browser view option. * **Image height** - Specify the gallery image height for the image browser view option. * **Border Width** - Set the width of borders. * **Border style** - Choose the style to be applied to the border of the sliders. * **Border style** - Select the border style for the images. * **Border Color** - Choose the color of the slider main border. * **Border Radius** - Define the radius of the slider main border. ### Image Title Options * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define the font size for the image title. * **Font family** - Specify the font family for the text used with the slider. * **Title Text Align** - Set the location of the title in the box in slider . * **Color** - Select color tune it with your image slider * **Background Color** - Here you can select your favourite background color for slider title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify the preferable position of the title. You can drag and drop the text layer to a desired position. ### Navigator Options * **Slideshow Navigation** - Select between the option of always displaying the navigation or not. * **Color** - Select a color for the navigation. * **Hover color** - Select a hover color for the navigation. * **Current Color** - Specify the color of the dot for the currently displayed image slider. * **Border color** - Select the color for the border in slider navigation. * **Border radius** - Select the border radius of the navigation. * **Navigation position** - Set the position of the navigation. * **Position From Left** - Define the position of the title using the view graph. ### Choose Icons for Slider * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 9 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. ### Arrows Options in Slideshow * **SliderShow Arrows** - Select option of always displaying the navigation or not in slider. * **Slider icon color** - Slider element's image-slider Overlay color. Select a color for the overlay on the slider as you hold the mouse arrow on it. * **Slider icon size** - Alter the size of the icon regardless of the container (px) * **Position From top in Slider icon** - Specify the preferable position of the slideshow icon. You can drag and drop the text layer to a desired position. ### Loading Icon * **Select Icon in Slider** - There are 19 types of animation in “ Image Slider ” * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Full Width Slider** * **Autoplay** - Choose whether to autoplay the responsive sliders or not. * **Change speed** - Specify the change speed in milliseconds. * **Slider Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Slide Spacing Color** - Your slider image can also have spacing color and this option allows to choose the exact color for that background. You can just click on the color which you'd like to have as a slide spacing and choose your favorite color. * **Pause time in Sliders** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. * **Slider background Color** - Select background color for image. The color will be visible with during the slide change within specific effects. ### Slider Options * **Image width** - Define gallery width for slider image view. * **Image height** - Specify gallery height for slider image view. * **Border Width** - Set the width of borders. * **Border style** - Choosestyle to be applied to border of sliders. * **Border Color** - Choose color of sliders main border. * **Border Radius** - Define radius of sliders main border. * **Slide Cols** - Define how many images do you want to see in your slides at once. * **Slider radius** - Choose radius for slider images. **Photo title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define the font size for the image title. * **Font family** - Specify the font family for the text used with the slider. * **Title Text Align** - Set the location of the title in the box in slider . * **Color** - Select color tune it with your image slider * **Background Color** - Here you can select your favourite background color for slider title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify the preferable position of the title. You can drag and drop the text layer to a desired position. ### Navigator Options * **Slideshow Navigation** - Select between the option of always displaying the navigation or not. * **Color** - Select a color for the navigation. * **Hover color** - Select a hover color for the navigation. * **Current Color** - Specify the color of the dot for the currently displayed image slider. * **Border color** - Select the color for the border in slider navigation. * **Border radius** - Select the border radius of the navigation. * **Navigation position** - Set the position of the navigation. * **Position From Left** - Define the position of the title using the view graph. * **Navigation size** - Define size of navigation bullets. ### Choose Icons for Slider * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 9 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. ### Arrows Options in Slideshow * **SliderShow Arrows** - Select option of always displaying the navigation or not in slider. * **Slider icon color** - Slider element's image-slider Overlay color. Select a color for the overlay on the slider as you hold the mouse arrow on it. * **Slider icon size** - Alter the size of the icon regardless of the container (px) * **Position From top in Slider icon** - Specify the preferable position of the slideshow icon. You can drag and drop the text layer to a desired position. ### Loading Icon * **Select Icon in Slider** - There are 19 types of animation in “ slider image ” * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Vertical Thumbnail Slider** **Slider General Options** * **AutoPlay** - Autoplay - Choose whether to autoplay the slider slideshow or not. * **Slider Change Speed** - Change speed - Specify the change speed in milliseconds. * **Slide Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Background color** - Select background color for slider. * **Autoplay Steps** - Set autoplay steps to change slider. * **Pause time in Sliders** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. **Slider Options** * **Slider Width** - Specify width of the slider in pixels. * **Border Width** - Set the width of borders. * **Border Color** - Choose border color of slider. * **Image Radius** - Define radius of slider main image. * **Height** - Specify width of the slider in pixels. * **Image Border style - Select border style for main image. * **Image Title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define font size for image title. * **Font family** - Specify font family for text used with the image in slider. * **Title Text Align** - Set location of title in box in slider. * **Color** - Select color tune it with your slider image. * **Image Background Color - Here you can select your favourite background color for image title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify preferable position of title. You can drag and drop text layer to desired position. **Navigator Options** * **Border radius** - Select border radius of image navigation. * **Border color** - Select color for border in slider navigation. **Choose Icons for Slider** * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 9 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. **Arrows Options in Slideshow** * **Slider Show Arrows** - Choose whether to show arrows the images or not in slider. * **Color** - Slider element's image-slider Overlay color. Select a color for the overlay on the slider as you hold the mouse arrow on it. * **Size** - Alter size of icon regardless of container (px) * **Position From Top** - Specify preferable position of icon. You can drag and drop icons to desired position. **Loading Icon** * **Select Icon in Slider** - There are 19 types of animation in " Slider Image " * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Horizontal Thumbnail Slider** **Slider General Options** * **AutoPlay** - Autoplay - Choose whether to autoplay the slider slideshow or not. * **Slider Change Speed** - Change speed - Specify the change speed in milliseconds. * **Slide Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Background color** - Select background color for slider. * **Autoplay Steps** - Set autoplay steps to change slider. * **Pause time** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. **Slider Options** * **Slider Width** - Specify width of the slider in pixels. * **Border Width** - Set the width of borders. * **Border Color** - Choose border color of slider. * **Image Radius** - Define radius of slider main image slider. * **Height** - Specify width of the slider in pixels. * **Image Border style - Select border style for main image slider. * **Image Title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define font size for image title. * **Font family** - Specify font family for text used with the image in slider. * **Title Text Align** - Set location of title in box in slider. * **Color** - Select color tune it with your slider image. * **Image Background Color - Here you can select your favourite background color for image title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify preferable position of title. You can drag and drop text layer to desired position. **Navigator Options** * **Border radius** - Select border radius of image navigation. * **Border color** - Select color for border in slider navigation. **Choose Icons for Slider** * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 18 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. **Arrows Options in Slideshow** * **Slider Show Arrows** - Choose whether to show arrows the images or not in slider. * **Position From Top** - Specify preferable position of icon. You can drag and drop icons to desired position. **Loading Icon** * **Select Icon in Slider** - There are 19 types of animation in Slider Image * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets. **Thumbnail Slider** **Slider General Options** * **AutoPlay** - Autoplay - Choose whether to autoplay the slider slideshow or not. * **Slider Change Speed** - Change speed - Specify the change speed in milliseconds. * **Slide Spacing** - Space between containers image. Set the padding level between each item container image slider. * **Background color** - Select background color for slider. * **Autoplay Steps** - Set autoplay steps to change slider. * **Pause time** - Set time interval for change of galleries in milliseconds. * **Arrow Steps** - Set arrow steps to change slider image. **Slider Options** * **Slider Width** - Specify width of the slider in pixels. * **Border Width** - Set the width of borders. * **Border Color** - Choose border color of slider. * **Image Radius** - Define radius of slider main image slider. * **Height** - Specify width of the slider in pixels. * **Image Border style - Select border style for main image slider. * **Image Title Options** * **Show Title** - Choose whether to show title the sliders or not. * **Title font size** - Define font size for image title. * **Font family** - Specify font family for text used with the image in slider. * **Title Text Align** - Set location of title in box in slider. * **Color** - Select color tune it with your slider image. * **Image Background Color - Here you can select your favourite background color for image title * **Opacity** - Define the level of opacity for the image, providing its percentage. * **Position From Top** - Specify preferable position of title. You can drag and drop text layer to desired position. **Navigator Options** * **Slideshow Navigation** - Select between the option of always displaying the navigation or not. * **Color** - Select a color for the navigation. * **Background color** - Select background color for navigation. * **Current Color** - Specify the color of the dot for the currently displayed image slider. * **Border color** - Select the color for the border in slider navigation. * **Border radius** - Select the border radius of the navigation. * **Navigation position** - Set position of navigation in slideshow. **Choose Icons for Slider** * **Slider icon** - assign a default icon in the slideshow. You can select icons from our 18 different beautifully designed sets. Also, you can define to appear the icons or not in a slideshow. **Arrows Options in Slideshow** * **Slider Show Arrows** - Choose whether to show arrows the images or not in slider. * **Position From Top** - Specify preferable position of icon. You can drag and drop icons to desired position. **Loading Icon** * **Select Icon in Slider** - There are 19 types of animation in Slider Image * **Loading Icon** - assign a default icon in the slideshow. You can select icons from our 19 different beautifully designed sets.