Client Logo Slider
- Download
- Installation
- Setup
- General Settings
- Styling Settings
- Image Settings
- Advanced Settings
- How to
Download
Downloading the Extension
Email : After purchasing the extension from our store, you will receive an email with the link to download the extension.
Store : You can also download the extension from the Downloads section of our store. If you are new to our store, then you have to first create an account using the same email address which you have used while purchasing the extension.
Click to download the extension package - ClientLogoSlider_UNZIP.zip
Unzip the Package
- UNZIP the package ClientLogoSlider_UNZIP.zip using any file unzipper or winrar.
- Upon unzipping the package you will find the following.
- mod_logo_slider_X.x.zip : Installation file for both Joomla 3 & Joomla 4
- ReadMe.txt file - This file has information about the current version of the extension.
- mod_logo_slider_X.x.zip : Installation file for both Joomla 3 & Joomla 4
Installation
Install the Extension
- Now to install the file login to the backend of your Joomla website.
- For J3 - Go to Extensions > Extension Manager and click on the Upload Package File Tab. Click on browse to choose the correct installation file and click on "Upload and Install"
- For J4 - Go to System > Install > Extensions . Drag and drop or browse for file to install.
- The success message will appear after installation is completed.
Setup
After successful installation
- For J3 - Go to Extensions > Module Manager
- For J4 - Go to Content > Site Modules.
- You will find Client Logo Slider listed. Clicked on it to configure.
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.
- License Key : The extension version 5.5 and higher has an option to add the license key which allows you to directly update the extension to the latest version without manually downloading from our site every time their is a new update. The license key can be downloaded from the Downloads Section of our store.
- 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 get the license key for the extension?
- Go to the Download Section of our store.
- If you already have an account then login or else you create an account if you are new to our store..
- Create an account using the same email address which you have used while purchasing the extension. (This isn't your Paypal email address but the address which you have provided in our store while purchasing)
- Once you login to the Download section you can find the License Key for the extension.
- How to find module positions of a template?
- How to insert the module inside an article?