Stylish Slider With Animation

Introduction

Introducing the “Stylish Slider With Animation” module. Add background images, overlay colours, heading, description and active-inactive animations. Also make the sliders linked to your desired page. Make your website visually appealing and captivate the user's attention with this dynamic module.  

 

SUPPORT:

If you need assistance at any step of the way; get in touch with us at ProductSupport@transfunnel.com
And get Premium Support from Transfunnel - HubSpot's Elite Solutions Partner

Stylish Slider With Animation

Possible Layouts

Layout Options: Welcome to the “Stylish Slider With Animation” module. 

  • Auto-adjust Height: The module has cards that auto adjust the height to your website page. 
  • Content: The card in the module gives the option to add title and description that show hide when the cursor moves over them. 
  • Page View: The modules give the option to add 2 or 3 cards visible in a single screen with scroll/slider option. Another variant gives no gap in between cards. 
  • Responsive and mobile-friendly: The “Stylish Slider With Animation” module is designed to provide optimal viewing experiences on various devices, including desktops, tablets, and mobile phones. With its responsiveness, your page will adapt seamlessly, ensuring a consistent and engaging experience across all platforms. 
  • Customisation: The “Stylish Slider With Animation” module comes with a bunch of customisations, all of which you can control to give the user a seamless experience in tandem with your website’s colours, style, and design. 

 

Content features:

undefined-Jun-24-2024-09-31-05-9687-AM

Easily customise title and add/remove the slides. Also get further customisation option for each slide from here. 

undefined-Jun-24-2024-09-31-44-2811-AM

Title options in content setting. 

undefined-Jun-24-2024-09-32-19-8083-AM

Customise the slide, background and overlay of each card from its customisation setting in content settinng page. 

undefined-Jun-24-2024-09-33-08-5360-AMundefined-Jun-24-2024-09-33-34-8067-AM

Customise the slide title, link, and description from slide content setting option. 

undefined-Jun-24-2024-09-34-40-7697-AM

Customise the slide’s background image and overlay setting from background setting 

 

Style features:

undefined-Jun-24-2024-09-38-01-7696-AM

Customise the module style, title style and slide style from style settings.  

 

undefined-Jun-24-2024-09-38-30-6632-AM

In module style setting, you can customise the spacing, background and container setting for the module. 

undefined-Jun-24-2024-09-39-42-6924-AM

undefined-Jun-24-2024-09-40-20-0355-AMundefined-Jun-24-2024-09-41-21-5455-AM

 

The spacing and background setting options. 

 

undefined-Jun-24-2024-09-42-42-9809-AMundefined-Jun-24-2024-09-46-10-7395-AM

In the container setting, you can customise the background type, image, size, alignment, overlay, and container size.  

 

undefined-Jun-24-2024-09-46-46-5904-AMundefined-Jun-24-2024-09-47-14-6903-AM

Customise the module title heading font, alignment, and spacing from title style settings. 

undefined-Jun-24-2024-09-48-37-6265-AM

Customise the slide column, position and content from slide style settings. 

undefined-Jun-24-2024-09-49-13-7237-AM

undefined-Jun-24-2024-09-49-48-5639-AM

In slide column customise the column width, gap and corner. In slide position customise the slide mode and autoplay speed. 

undefined-Jun-24-2024-09-50-32-4548-AMundefined-Jun-24-2024-09-50-57-9777-AM

undefined-Jun-24-2024-09-51-21-5137-AM

In slide content setting, customise the around spacing, slide title, description and borderline style of them. 

Conclusion:

The “Stylish Slider With Animation” module lets you easily add stylish sliders on your website page. With a plethora of customisation options, you can make the module fit your brand’s design, colours and style.