Hot Swipe Carousel - Touch Friendly Carousel - HotThemes

Search Form and Social Buttons

HotThemes Logo and Top Menu

Compatibility View Demo Download Purchase Swipe Carousel $15 Get All Templates & Extensions $49

Hot Swipe Carousel Parameters

You probably already know that number of users of smartphones, tablets and other mobile devices with touch screens is growing daily. As a result, we may expect more and more people who are accessing our web sites equipped with touch screens, rather then mouses and keyboards. Hot Swipe Carousel rotates slides that may contain any HTML content (images, text, etc.) and it allows users to change slides by dragging them on the screen to the left or to the right.

This module allows you to create up to 20 slides. It's possible to use multiple instances of this module on the same page. As you can see, we are using it twice on the home page of Startup business template demo (for mail carousel and testimonials). It's used for the main carousel on the top and for the testimonials carousel on the bottom area.

Each slide can contain optional heading and any HTML content. You can enable and disable navigational elements, such as left/right arrows and dots. As you probably assumed, this module is 100% responsive. It will change its width according to the available screen space. Furthermore, it will change it's layout on the smallest screens where text block can't fit inside the image. The text block will be moved below the image on screens that have width less than 600px (you can change the breakpoints by editing the CSS file).

Responsive and Touch Friendly Carousel

Hot Swipe Carousel Slides Parameters

Each slide has its own set of options. There you can select the slide image, enter some heading and text (this is not mandatory). Also, don't forget to enable the slide, otherwise it will not be used in module output.

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.
  • Slides On Screen - Select whether to use full width for slides on screen or to use custom width (defined below).
  • 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 or pixels. 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

Since version 3.5.1, Hot Swipe Carousel supports retina screens (screens with double pixel density) in slides images and for images inside slide text. 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 an image named as myimage.jpg, the module will check if image myimage-2x.jpg exists in the same folder. It will show this image instead of the normal resolution image, but only on retina (double pixel density) screens. It's pointless to show double resolution images on screens with single pixel density.

If you add an image tag inside the text for the slide, the module will check if an image with double resolution exists in folder where regular image is placed.

Basically, you should select normal resolution images for slide images and use normal resolution images inside text, not double resolution images! Just make sure that you uploaded double resolution images in the same folder following the naming convention explained above. The module will take care to show proper images on different kinds of screens.

15 USD

Compatibility View Demo Download Purchase Swipe Carousel $15 Get All Templates & Extensions $49

Links, Partners and Social Media