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