Free Responsive Slider

Hot Slicebox is another free responsive slider module by HotThemes. With a unique transition effect based on the rotation of 3D boxes and a lot of parameters, it will be a very useful module for your responsive websites. This module supports up to 20 slots that you can fill up with images, with or without textual content. Each image can be linked.

You can select a number of slicing boxes for transition animation or let the module uses a random number for each transition. The orientation of slices can be horizontal or vertical. This is a responsive module which means that you can use it whenever you are about to develop a responsive website (optimized for mobile screens). Hot Slicebox is based on jQuery and it's not "too heavy" regarding the memory and processor usage, so you can expect it will be working fine on all popular mobile devices. You should optimize your images for the best results though.

Best of all, this module is 100% free for download. You can see a demo of this product on our template demos as well: Corporate Joomla template (on the home page) and Video background template.

Available Options of Hot Slicebox

The module parameters are in Extensions > Module Manager > Hot Slicebox. After installation, you'll see that some default parameters are already set there. The parameters can be changed according to your need.

All module parameters are grouped in several tabs: Module Properties, Text Style, Navigation, and Animation Properties. Also, each slide has its tab with options specific to this slide. Below you can read more details about all module parameters, grouped by tabs, with a short explanation of each parameter.

Module Properties

  • Unique ID: If you want to run multiple module instances on the same page, please enter different ID values here.
  • Open Links In A New Window: If your slides are linked, the links will be opened in a new window.
  • Text Box Background Color: If some of your slides contain text, this parameter determines the background color in RGB format (in example 0,0,0 for black or 255,255,255 for white color).
  • Text Box Transparency: This parameter could be 0 for totally transparent background of the text box or 1 for no transparency. You can use any parameter in between, in example 0.7, to create a nice effect of transparency.
  • Text Color: If some of your slides contain text, this parameter determines the text color.
  • Text Size: Size of the text in pixels.

Navigation

  • Navigation Arrows: You can enable or disable the navigation arrows here. When they are enabled, the user can rotate slides by clicking the left or right arrow icons.
  • Navigation Dots: If enabled, each slide will be represented as a dot below the slider. Click on the dots shows the appropriate slides.

Slides Options

Each of the 20 available slots for the slides has the same option. We will describe them all here.

  • Publish This Slide: This must be enabled if you want to include that slide in the rotation.
  • Select an Image: Click the select button, browse and select an image for the slide. You should upload your slide images using Joomla Media Manager or FTP previously. It's recommended that all images have the same resolution (width and height).
  • Image Alt Text: It's recommended to enter the alt value for all images.
  • Slide Text: If you need any text for the slide, enter it here (optional).
  • Link: Any link entered in this field will make the entire slide to be linked (optional).
  • Link Title Tag: If you entered link, you can enter the link's title tag here (optional).

Animation Properties

  • Auto Play: Enable this if you want the slides to rotate automatically.
  • Animation Speed: Value in milliseconds that determines the time needed to complete the transition.
  • Pause Between Slides: Value in milliseconds for pause between to slides. For example, you can enter 5000 for 5 seconds.
  • Orientation: Select horizontal or vertical rotation of the slices.
  • Perspective: Value for the perspective of the slices during animation.
  • Cuboids Count: How many cuboids will be slice the slide during animation. Avoid values over 10 for better performance of the animation.
  • Random Cubiods Count: If enabled, each transition will have a random number of cuboids.
  • Maximum Cuboids Count: If the previous option is enabled, this option will determine the maximum cuboids during the transition.
  • Disperse Factor: Value that determines an empty space between the cuboids during the transition. If a higher value is entered, the left cuboids will go more to the left side during the animation, while the right cuboids would go more to the right side.
  • Hidden Sides Color: Pick the color of the hidden sides of the cuboids during animation.
  • Sequential Factor: If this value is 0, all the cuboids will start the rotation at the same time. If a higher value is given, it determines the time between the start of the animation in milliseconds between the first cuboid and the second cuboid, and so on.

Supported Browsers and Credits

This module has been tested with IE8+, Firefox, Opera, Google Chrome, and Safari. It's also tested on mobile devices based on iOS (Apple) and Android 4+ operating systems.

The Hot Slicebox module is powered by:

Do you like Hot Slicebox? Please write a review on JED.