Hot Joomla Carousel - Joomla Image Rotator

Need to display your images as a carousel? Easily done with our new Joomla extension!

Multiple Slides

Hot Joomla Carousel is a responsive module that will help you to show your photos in a carousel style. Usage is very simple. You need to enter folder path where your images are uploaded and you are done! Module will show all images from this folder. You may control many other parameters, like colors (background, border), image sizes, margins, etc.

Full Width of Slides

Let your images rotate like a carousel!

Open module parameters in Extensions > Module Manager > Hot Joomla Carousel. You'll see that some default parameters are already there. However, you should change some of them to accommodate module for usage on your site.

Module Properties

Unique ID: If you want to run multiple module instances on the same page, please enter different ID values here.

Folder With Images: Enter folder (relative to Joomla root) where your images are stored. Don't include leading or trailing slash (in example images/headers).

Display Mode: In Full Width mode, each slide will occupy the full module space. In Custom Width, slide width will be determined by Slide Width parameter.

Slide Width: If you selected Custom Width for Slides On Screen parameter, you can enter width of slides here. Enter value and units, in example 23% or 250px.

Responsive Mode Screen Width: If screen width value is less of the value entered here, only one slide will be displayed. Enter value and units, in example 767px.

Style, Navigation and Animation

Slide Padding: Vertical and horizontal padding of the slides. Enter value and units, in example 2% or 20px.

Slide Margin: Margin around the slides. Enter value and units, in example 2% or 20px.

Background Color: Select background color around the carousel images. The padding value must be greater than 0 to see the background color around the slides.

Slide Width: If you selected Custom Width for Slides On Screen parameter, you can enter width of slides here. Enter value and units, in example 23% or 250px.

Border: Border width, style and color can be selected.

Navigation Arrows: Enable or disable the navigation arrows. Enter distance of the navigation arrows from the left and right edge.

Navigation Dots: Enable or disable the navigation dots. Enter distance of the navigation dots from the bottom edge.