Slide Show F5 is a layer-based responsive slider, which allows to combine images, text, videos (Youtube, Vimeo and HTML5), backgrounds and custom html. It allows you to customize the display time, type and time of transition (animation) of each slide as much of each layer.
Combining the many options available in this slider can be designed fantastic presentations that make more attractive our website and to allow the layer system your personal link to any URL can link it to any social network, web, article, shopping cart, etc ... that allows us to highlight and facilitate access to any content.
LICENSE
Slide Show F5 is free, and released under the GNU General Public License. The definition of this license as stated on Wikipedia is:
The GNU General Public License (GNU GPL or GPL) is the most widely used free software license, which guarantees end users (individuals, organizations, companies) the freedoms to run, study, share (copy), and modify the software. Software that allows these rights is called free software and, if the software is copylefted, requires those rights to be retained…
CHARACTERISTICS
Up to 40 elements between slide and layers
Background images as the slider (you can set a vertical or horizontal distance or animate the image by customizing the speed or direction of movement) or each slide or slide layer
Background color slider (you can set a vertical or horizontal distance) or each slide or slide layer
Videos Youtube, Vimeo and HTML5 element of each slide or slide layer
Text as slide layer (you can set the font for all the slides or each slide layer)
Html as slide or slide layer
Url link on each slide or in each slide layer
Time visibility, transition type and duration time of the transition. Can set them both to the slider as a whole and for each slide or for each slide layer
Show Indicators slide and navigation arrows (you can choose between different colors)
Manual or automatic transition
Direction of movement between the slide
Force the slider has the screen size or that of widht of the slider is the screen width
Set a width and height ratio serving for different types of display (not applicable to slider fullscreen)
Display a slider preload
Opacity slider, each slide or each slide layer
Set width and height of each layer in % of slider (in images or video just wide, the high is proportional)
Establish the exact vertical or horizontal position in % of the slider or predefined (up, down, vertically centered, left, right, horizontally centered)
Establish in videos an imagen preview (in Youtube and Vimeo, even can select the default picture setting to Youtube or Vimeo video), autoplay, autoplay-one and also at the end force the change slide
INSTALLATION
To install the module Slide Show F5 is necessary to install Joomla 3 or higher.
The first one is to download the latest version of the Slide Show F5 module oF the website Joomla F5.
There are two ways to install the module of the Slide Show F5 in Joomla 3.
Upload Package File:
The simplest form of installation is follow the next steeps. The first thing is download the latest version of Slide Show F5 module in the website Template F5 in zip format
From the backend (administrator) website of Joomla we go to menu Extensions -> Manage
In the "Upload Package File" tab we click on the buttom "Explore" and select the installation package (module zipped) from our local computer
We click on the button "Upload & Install"
Once installed you will have to publish a module (explained below)
Install from a directory:
We download the latest version Slide Show F5 of the module
Unzip the file on your computer
Transfer files using FTP to a folder Hosting (ideally to be / tmp)
From the backend (administrator) web site we go to Joomla to the menu Extensions -> Manage
On the "Instal from Folder" tab we specify the path to that folder
We click on the button "Install"
Once installed you will have to publish a module (explained below)
CREATE SLIDER
Once the Slide Show F5 module is installed, we can create our slider in the menu of the backend (administrator), in Extensions -> Modules
We click on the button again, it will open a screen and we will click on the name of our Slide Show F5 module
We will open the screen to start creating our slider
Module tab:
Title should put the title you want.
Show title: select if you want to show or not
Position: we can select a position for our slider
Basic tab:
Width Slider in px: this data together with the following (High Slider) serve to set a rate and to adjust the width and height in different screen sizes
High Slider in px: this data together with the previous (Width Slider) are used to establish a ratio and to adjust the width and height in different screen sizes
Percentage of container div (width in %): percentage of the width of the div containing the module we want to occupy the slider. Do not insert percentage symbol (%) to assign a value
Automatic Transition: select if we want the transition to be automatic or single manual (click on the arrows)
Slide change direction: direction of movement (left, right) of the change of slide
Type of transition between Slides: select the type of transition between slides. We can also individually select the type of transition at each change of slide by selecting the type of transition in the first element of the slide
Time of transition between Slides: select the time it takes to do the transition in changes made slide. You can also select individual transition time of each slide change in the first slide element
Slide time visibility: we introduce the time will be visible each slice (the time between change and change of each slide). You can also select individual time visibility of the slide on the first element of the slide.
Force the width screen: select if we want to force the slider spans the width of entire screen
Force entire screen: select if we want to force the slider occupies the width and height of the screen from above (top: 0)
Show Navigation Arrows between Slides: select if we wish to show the Navigation Arrows between slides
Navigation Arrows between Slides fixed: We will select them if we whish to fixed show the navigation arrows between Slides
Type Indicators Arrow: We will select them if we whish to show the indicators type Arrow
Color of the Navigation arrows: select the color of the navigation arrows between slides
Show Arrow below reading page: select if we wish to show the arrow below reading page (if we are forced entire screen). It takes us to the end of the module to continue reading the page
Animation Navigation arrow below page: select if we wish to encourage the Navigation arrow below reading of the page (if we have chosen to display the arrow below reading page)
Show Indicators Slide: We will select them if we whish to show the indicators of the position of slide
Opacity Slider: Select the opacity of the slider
Horizontal margin Slider in %: we assign a margin to the slides, to give a horizontal separation (left and right) to the slider. Do not insert percentage symbol (%) to assign a value
Vertical margin Slider in %: we assign a margin to the slides , to give a vertical separation (up and down) to the slider. Do not insert percentage symbol (%) to assign a value
Background color slider: can give a color (backgroundcolor) at the bottom of the module. If you have already selected a image as background, then this color will not act
Background image slider: we can put an image to the bottom of the module. If you have also selected a color as background, the image will replace the background color
Encourage Background image: select if we want to encourage the background image (if you have already selected a background image)
Background animation speed (px /ms): select the speed of animation of the background image (will move a pixel in the milliseconds selections)
Font type: select a font that usually have almost all devices. You can also select the font individually for each layer of each slide
Font type google: If your template is Joomla F5 you can enter a font of google. You can also select the font individually for each layer of each slide
Show preload: select if you want or not appear image of preload
Show timeline: select if you want or not appear timeline
Timeline color: select the color of the timeline
Timeline Height: select the height of the timeline
Create Slide tab
Create Slide: when you click on the button Create Slide, show us the header of the slide that we are going to create and the header and the basic fields of the first layer (layer). Selecting the field Layer Type, the type of layer that we want to introduce specific fields, will show us the type of layer that we have selected
Fields showing all layers
Layer Name: enter the name of the layer you want to display when we keep that layer. Layer the word default followed by the corresponding layer number appears
Layer Type: select the type of layer we want to introduce. If the first layer will not display the type of text, as this first layer occupy 100% width and height of the slider, the image type will expand or decrease the size of the Layer Type (if it is necessary) and will focus it for occupy all the space and in the case of video type will show the full width and the height of the slider will be proportional
Specific Fieds of the first layer
Slide name: enter the name of the slide you want to display when we keep that slide. By default the word followed by the number corresponding slide appears Slide
Time to next Slide in milliseconds: introduce the time in milliseconds that this slide is displayed. If left blank will apply the time set in the Basic tab for all slide. Enter only the numeric value of time
Transition to this type Slide: we introduce the kind of transition that will take place between this slide and the next. If left blank the type of transition provisions apply the Basic tab for all slide
Duration of the transition: select the time it takes to transition between this slide and the next performed. If left blank the set time will be applied in the Basic tab for all slide
Specific Fields of the following layers:
Width in % : The width introduce as indeed (in relation to the width of the slider) to occupy the layer. Do not insert percentage symbol (%) to assign a value
High in%: We introduce high as indeed (relative to the high of the slider) to occupy the layer. Do not insert percentage symbol (%) to assign a value
Opacity: We introduce the opacity that we want the background (default 100%)
Insert link. URL: http: // www .: introduce the URL with which we link the background of the slide
Vertically: select any of the default vertical positions, that help us position the layer
Top position in %: introduce the value in percent (relative to the top of the slider) of the distance we have between the top position of the slider (top: 0 of slider) to the top edge of the layer. Do not insert percentage symbol (%) to assign a value
Horizontal position in %: select any of the default horizontal positions, which facilitate us to position the layer
Position from the left in %: we introduce the value in percent (relative to the width of the slider) of the distance we have between the left position of the slider (left: 0 of slider) to the left edge of the layer. Do not insert percentage symbol (%) to assign a value
Slide time in milliseconds after: we introduce the time that has to elapse between the slide belongs to the layer display and the appearance of this
Element Visibility time in milliseconds: We introduce the time the layer will be visible
Input Transition: select the transition type to show the layer
Transition time in milliseconds: introduce the time it takes to load layer
Output Transition: select the transition type layer to hide
Transition time in milliseconds: introduce the time it takes to hide the layer
Fields specific type of Background
Background: We introduce the color you want to have the background (by default black)
Fields specific type image
Select Image: select the image you want to include in the layer by clicking on the button Select and it opens a window screen where you can select the directory of our hosting in the dropdown Directory, upload a picture from our local device selecting the image we want to include pressing the button Choose File and once selected press the button Start Upload. We can also enter the address of the image in the input image URL. Once we have completed the selection of the image or the inclusion of a URL press the button Insert
Specific type text Fields
Text: we include the text you want to appear in the layer
Font type: select a font that usually have almost all devices. You can also select the default font for all layers in the Basic tab
Font type google: if your Joomla template is F5 you can enter a font of google. You can also select the default font for all layers in the Basic tab
Text size PC (tablet and mobile automatic) in px: we introduce the approximate size of the text with reference to a display computer PC. This size will consider to accommodate various display types and the size of this size container wherein div is included, whose width and high must enter in the following fields. Enter only the value of text size
Width in %: introduce the container div width of the text. Do not insert percentage symbol (%) to assign a value
High in %: we introduce the container div high of the text. Do not insert percentage symbol (%) to assign a value
Text alignment: select the text alignment
Text color: select the text color
Fields specific type of video
Select video source: select the source from which we will include video (youtube, vimeo or HTML5)
Code of Video (Youtube or Vimeo) or URL (for html5 video mp4): introduce the code of the video from youtube, vimeo or HTML5 video URL. If a Youtube video to select the code is in the URL of the video from "v =" for example, if the out https://www.youtube.com/watch?v=kK1Z1RlPw the code would kK1Z1RIPw . If it is a Vimeo video would be the latest issues of the URL for example if the address was https://vimeo.com/16584628 the code would be 16,584,628
Previous image video: select if you want to include a image preview to the video in the videos, we can include a custom image (which you select in the next field) and if the video is on Youtube or Vimeo you can select the default image that sets Youtube or Vimeo the video.
Select image from the video: select the image you want to pre-video (previously we have selected custom image in the before field) by clicking on the button Select and opens a window where you can select the directory of our hosting the pop Directory, upload an image from our local device selecting the image we want to include by clicking the button Choose File and once selected press the button Start Upload. We can also enter the address of the image in the input image URL. Once we have completed the selection of the image or the inclusion of a URL press the Insert button.
Width in % of the Slide ( the high will be proportional): introduce the width of the video, the high will be proportional to the ratio default to which we select in the next field. Do not insert percentage symbol (%) to assign a value
Proportion of the video: select the video proportion and will apply in relation to the width entered in the previous field
Autoplay: select if you want to upload the video, this is displayed directly (does not apply if we have chosen to include previous image), we can also select the autoplay is performed only the first time the video is loaded
After you finish: select if we want the end when the video display is displayed next slide or to remain in the same video
Video controls (not acting on Vimeo): select if you want to show or hide the video controls. On Vimeo you can not hide
Html specific type Fields
Html: we include the html you want to include in the layer
Width in %: introduce the width of the container div of the html. Do not insert percentage symbol (%) to assign a value
High in %: we introduce the high of the container div of the html. Do not insert percentage symbol (%) to assign a value