Client Logo Slider User Guide
A how-to guide with helpful information about
Client Logo Slider installation, capabilities, features and options.
Note: This documentation applies to Version 4.9 and above only.
If you have an older version of Client Logo Slider than 4.9, We would recommend you to download the latest version of Client Logo Slider
Installation
- Download the ClientLogoSlider_UNZIP.zip file from the email you have received after purchasing the extension or from the Store website.
- UNZIP the file ClientLogoSlider_UNZIP.zip. You will find a ReadMe.txt file and installation file (mod_logo_slider3.x_vX.X.zip).
- To install the file open the backend Administrator and go to Extensions > Manage > Install menu.
- Choose the option Upload Package File and select mod_logo_slider3.x_vX.X.zip.
- Upon successful installation you see the message "Installation of the module was successful."
Setup
- After successful installation of the module, go to Extension > Modules and Search for Client Logo Slider. If you don't find it in the modules page then click on the New button in the top left corner of the page and add Client Logo Slider Module.
- After opening or adding a New instance of the Client Logo Slider module you can find different tabs with different parameters to set.
Module Tab Options
Show Title : Set the title of the Module to Hide if you don't want the title to appear in the frontend.
Position : Set the position of the module where you would like the slider to appear.
Menu Assignment Tab
To assign the module to a particular menu or all the menu go through the following documentation.
https://docs.joomla.org/How_do_you_assign_a_module_to_specific_pages%3F
General Settings
In general settings tab you can set the dimension, speed, effect and other directional settings.
- Height of the Slider : Set the height of the slider in pixels. Ex: 150. Don't mention px in the textbox.
- Width of Each Slide : Set the width of each slide in pixels. All the slides will be of same size. Ex : 200.
- Effect: You can set the effect of the slider to Horizontal, Vertical or None. If set to None, all the images will show without any effect.
- Max Slides : The maximum number of slide which which you want to show on a desktop at once.
- Min Slides : The minimum number of slide which you would like to show on a mobile device.
- Move Slides : The number of slides to move on transition. This value must be greater than Min Slides, and less than Max Slides. If zero (default), the number of fully-visible slides will be used.
- Auto Slide : Set auto slide to enabled if you want the images of the slider to slide automatically.
- Speed : Enter the time between each sliding. The time has to be in milliseconds. Ex : 2000 which means 2 seconds.
- Pause Time : Set the pause time between two slides.
- Enable Ticker : Option to change the sliding mode to ticker mode. For continuous image sliding you can enable the mode. You can only control the speed of the ticker. Navigation and Pagination don't show in this mode
Styling Settings
In styling settings you can customize the UI of the slider using the following parameters. If you want to add other changes besides the following parameters we will recommend to use the Extra CSS parameters in the Advanced Settings and add your own CSS.
- Greyscale Images : Set the greyscale to enabled if you want grey effects for the slide.
- Controls : Select the control which you would like to have for the slider. You can set to Pagination, Navigation, Both or None.
- Controls Color : Set the color of the navigation and pagination.
- Controls Color on Hover/Active : You can select the color of the navigation and pagination on hovering or clicking.
- Image Border Color : Set the color of the border around the slide.
- Image Border Size : You can set the border size in pixels. Ex : 2, which implies 2px.
- Image Background Color : Set the background color of the slide.
- Image Background Radius: You can set the radius of the background in pixels or percentage. Ex : 2px or 50%.
- Initial Image Opacity: Opacity of the images on page load. It ranges between 0 to 1, Ex : 0.5.
- Show Labels : The slider has option to show labels/caption for each image. The labels can be placed in different positions according to the requirements.
- Overlay Color : The label can be places as an overlay and the color of the overlay can be set using the color picker.
- Overlay Opacity : The opacity of the overlay ranges between 0-1, Ex: 0.8.
- Label Color : The color of the label can be picked using the color picker.
- Label Font Size : The label font can be set. Ex : 12px.
- Label Align: You can align the label and place it in different positions.
Image Settings
In the Image Settings Tab, images of the slider, caption/label, Alternative text and URL can be set. Images for the slides can also be fetched from a folder.
- Image Source : Select the image source of the slider. Set to Slides if you want to use label and url for each slide.
- Image Folder Path: You can set a path to fetch images for the slider. Ex: images/slides/
- Show Images : Option to show images sequentially of randomly in the slider.
- Sort Images By : Option to sort images in ascending or descending order by image name.
- Enable Link : Option to enable or disbale URL/Link.
- Open in : Option to open the URL in a new tab or same when a slide is clicked.
Slide Settings
To add an new slide click on the + button. On clicking the + button you will find the following options. Keep on repeating the process for any number of slides.
Select an Image : Select the image from the media manager which you would like to show in the slider.
Alt Text : Set the alternative text for the image. Fill the textbox for good SEO results.
Caption : Set the caption or label of the image which you would like to show. Leave it blank if you don't want any caption or label
URL: Set the URL for each slide. Leave it blank if you don't want to link the slide.
Advanced Settings
In the advanced settings you can find the jQuery Control and Extra CSS parameter.
- Include jQuery Files : You can include the jQuery files of the slider inside the head tag or in the body to avoid any jQuery conflicts with other modules.
- Enable Timthumb Image Resizer : Set to enable if you want to use the image resizer.
- Slide Margin : This is an extra option to add margin around each slide. Ex: 10 which implies 10px margin around each slide.
- Extra CSS: You can add extra CSS into the module parameters easily without modifying any template CSS files.
How to
- How to find module positions of a template?
- How to insert the module inside an article?