Hot Swipe Carousel - Joomla Extension

Hot Swipe Carousel module, rotating slides that can contain any HTML content (images, text, etc.), it allows users to drag and drop them on the screen left or right. This module allows you to create up to 20 slides. You can also use multiple instances of module on one page. Each slide can contain additional header. You can enable and disable the navigational elements such as left/right arrows and points. The module is 100% responsive, making changes its width in accordance with the available display space. In addition, on small screens, where the text can't fit within the image, it will be moved under the image.

 

Extension Description

You probably already know that the number of users of smartphones, tablets and other mobile devices with touch screens is growing every day. As a result, we can expect more and more people that access our web sites from devices equipped with touch screens, and then a mouse and keyboard. Hot Swipe Carousel - slides, which can contain any HTML content (images, text, etc.) and allows users to change slides by dragging them on the screen to the left or right on the touch screen.

This Joomla module allows you to create up to 20 slides. You can use multiple instances of this module on the same page. As you can see in the demo, the module is used twice for the main slider on the top of the page, and the Testimonials carousel at the bottom of the screen.

Each slide can contain additional header and any HTML content. You can enable and disable the navigational elements such as left / right arrows and points. As you probably assumed, this module is 100% adaptive. It will change its width depending on the available screen space. In addition, it will change the layout on small screens where text block can't fit within the image. Text block is moved below the image on the screens that have a width of less than 600px (you can change the limits by editing the CSS file).

Hot Swipe Carousel - Touch Friendly Carousel Options

Module Properties

• Unique ID - If you need multiple instances of this module on the same page, each instance should have different ID.
• Load jQuery and No Conflict Mode - These options should be disabled if you template is already loading jQuery.
• Slides On Screen - These options should be disabled if you template is already loading jQuery.
• 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.
• Slide Margin - If you selected Custom Width for Slides On Screen parameter, you can enter margin between slides here. Enter value and units, in example 2% or 20px.
• Text Box Width - If your slides have text blocks, this will be the block's width in percents. By default, for screens smaller than 1024px, this parameter will be automatically set to 70%. Also, for screens smaller than 600px, this block will be moved below the image.
• Text Box Horizontal Position - If Full Width is selected, only one slide will be shown on screen at once. If Custom Width is selected, multiple slides will be shown on screen at once and you can define slide width and margin below.
• Center Text Box Horizontally - Enable this if you want text block to be automatically centered on all screen sizes.
• Text Box Vertical Position - Position from the top side of the module boundaries in pixels. By default, for screens smaller than 1024px, this parameter will be automatically set to 10px.
• Text Box Padding - Value for padding inside the text block in percents.

Module Style

• Text Box Background Color - Background color of the text block in RGB format.
• Text Box Transparency - Enter value between 0 (full transparency) and 1 (no transparency) to set the transparency of the text block.
• Text Color - Select the text color inside the text block.
• Heading Text Size - Set size of the headings inside the text block.
• Text Size - Set size of the regular text inside the text block.

Navigation

• Navigation Arrows - Enable or disable left/right navigation buttons.
• Navigation Dots - Enable or disable clickable dots that show slides and active slide.

Animation Properties

• Pause Between Slides - Enter value in milliseconds. It will be used for pause time between slide rotation. In example, enter 5000 for pause of 5 seconds on each slide.

Settings For Each Slide

There are 20 slots for your slides. Each slot can contain different image and HTML that will be displayed in the content box.

• Publish This Slide - Slide will be published only if this parameter is enabled.
• Select an Image - This button opens a popup window where you can upload and/or select image for this slide.
• Image Alt Text - Alt text for that describes your slide image.
• Slide Heading - Heading text of your slide. It will be displayed in the content box.
• Slide Text - Text or any HTML code for the slide. It will also be displayed in the content box.
• Slide Priority - The slides with higher priority are displayed before the slides with lower priority. In example, the slide with priority value 3 will be displayed before the slide with priority value 7.

Support for Retina screens

Starting with version 3.5.1, module Hot Carousel Swipe support Retina screens (screens with double density of pixels in the images and slides for images within the text of the slide. If you want to use this feature, you need to prepare two versions of your images (normal and double resolution). In example, if you have the image named as myimage.jpg the module will check if the image myimage-2x.jpg exists in the same folder. It will show the image instead of normal image resolution, but just for the Retina (double-pixel density) screens. Since there are no special values to show images with twice the resolution on conventional screens with the same pixel density. The module will take care to show the appropriate image on various screens.