<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=149034655494227&amp;ev=PageView&amp;noscript=1">

The State of Sliders & How to Make Them Interactive On HubSpot

January 17, 2017 | Dev Shah

When introduced, sliders and carousels became hot web properties a few years ago and it was hard to find a website without some kind of sliding or rotating images, specifically on the homepage. Though they receive lot of flak, sliders are still managing to fascinate marketers owing to their ability to show multiple visual media content that is displayed at a single place. It gives them ample scope to promote offers and display interactive content including videos. So, why exactly are sliders receiving negative reviews? Are they really a bygone trend or are marketers still crazy about them. HubMonks studied the report given by Mobify and figured out that there are some myths that have been shockingly busted.

Click Here To View The HubSpot Slider Demo Created By HubMonks

The Common Myths About Sliders/Carousels Busted By Mobify

Myth 1: People don’t interact with carousels.

Answer: High rate of interaction has been noticed for image gallery carousel. 72% of users advance the carousel once. Direct interaction by zooming is done by 23% of users.

Myth 2: People only interact with the first slide.

Answer: Product image gallery carousels get direct interaction from people at a rate of 15.7%. At least 64% of people advance to the third slide.

Myth 3: Automatic advancement of carousels is bad for users

Answer: If there is an auto-advancement feature, turn it off the moment the user starts interaction with the carousel. On mobile, you could turn off auto-advancement as soon as an active touch on the carousel is registered.

Sliders in a HubSpot Website

A HubSpot website is power-packed with advanced features both for marketers and developers. HubSpot’s COS/CMS platform includes a responsive Image Slider module that can be added to any live COS/CMS page. Though HubSpot is limited in interactive support, it still allows combining design and functionality in order to make the sliders interactive and helping the marketer to successfully capture user attention and further the user engagement could rise.

HubSpot uses a third-party jQuery component called the flex slider.

Does HubSpot Provide The Most Commonly Used Sliders?

Let’s see if HubSpot is able to fulfil all the requirements of a modern day slider. Which are the most common forms of slider? Presently, there are 16 top slider variations that you come across commonly:

 

Vertical slider

Full screen sliders

Content + image

Content slider, without image

Video slider / Video background

Thumbnail slider

Partial view slides

Centre slider

Animated slider

Slider with bullets / Navigation arrows

Auto rotate, auto play, rotate in cycle

Responsive

Touch support

Slider in light box

Carousel-slider

Slider with parallax

 

 

A slider in HubSpot is capable of producing all the above mentioned variations.

 

What Interactivity Features Do You Get With The HubSpot COS/CMS Slider?

Features

Yes/ NO

Features

Yes/ NO

Horizontal / Vertical

Yes (Only Horizontal)

Image and video as background

Yes

Responsive

Yes

Auto play pause

Yes

Touch support

Yes

Thumbnail

Yes

Audio video support

Yes

Full screen

No

Custom Navigation

No

Partial slides

No

Parallax support

No

Edibility Content

Yes

Pagination

Yes

Looping / carousel

Yes

Light box

Yes

Animation /Transition

Yes

Duration of slides

Yes

API Call-back

No

Key Observation at HubMonks

  • HubSpot COS/CMS lets us create global module that could be used to create sliders, which have to appear often across multipile webpages, such as the navigation. This reduces the efforts to code the same sliders for all pages and you could call the slider wherever required.
  • Many marketers may want to change the content of the slider across various pages in context to the UI at page level. In such cases, using HubSpot slider as a custom module will be the best option.
  • HubSpot slider doesn’t give a provision to add video directly to a slide, and you might want videos in the background. We have opted for a different solution, and used the popular slider jQuery owl carousel.
  • With HubSpot sliders there is no API call-back function to develop custom functionalities and add features. We need to utilize third-party or open source sliders. This requires technical resources or development team with dedicated expertise in HubSpot COS/CMS development. The open source jQuery plugin like the owl carousel is one more option if in-house developers are working.
  • Custom coding could be used for animation or transition effects in the HubSpot sliders, as we are limited with these effects by default. Animation library could be used to have animated effects in the sliders.
  • Responsive is an issue with HubSpot sliders as we can’t configure how many slides should be shown at various resolutions. Help of technical resource is recommended to get this custom coded. Alternatively, one could also use third party plugin or open source jQuery slider plugin to get a responsive view.
  • Custom coding is necessary to convert the slider that has an image or video, into a full screen as it is not supported by default in HubSpot.
  • If you want to customize the coding of slider, it is not possible to access the HubSpot Slider JavaScript. In addition to that it is not downloadable in order to update the code. In such a scenario, the best solution is to get the help of some available plugins.
  • If you are looking for slider orientation (i.e. converting horizontal into vertical and vice versa), you might not be able to get the option in HubSpot. Some third-party plugins could be utilized and orientation could be achieved just by manipulating the plugin configuration.
  • In a HubSpot slider we are not able to build dynamic and destroying slider. This is necessary when you want a slider on a desktop site but not on the mobile version. You will need to manually code in order to destroy the sliders for the mobile version and make them appear only on the desktop version of the site.
  • Based on our observation, we have created sample sliders on the HubSpot platform by adding custom interactivity. Click the below given link for the sliders:

Click Here To View The HubSpot Slider Demo Created By HubMonks

Conclusion

HubSpot is constantly evolving the COS/CMS platform to overcome the limitations and add more interactivity options for the developers. In the interim, developers could customize the components with code editor and utilize third-party plugins to add a desired interactivity to sliders and various other components of the web page. Developers could also access thousands of sliders that are available on the web.

At HubMonks, we are constantly adding interactivity to sliders and various other components across all our projects. In addition to our key findings mentioned above there are several other limitations in interactivity that we have overcome in order to provide an edge to the marketers and help them display their content efficiently.

Web Development

About

Dev Shah

Dev Shah

Dev is the Head of Marketing at HubMonks, a HubSpot content management system (CMS) partner for major inbound marketing agencies and brands. Dev utilizes and swears by the power of the HubSpot inbound marketing methodology. He loves to share valuable insights on HubSpot’s marketing software, content management system (CMS) and the best practices to set up successful inbound marketing campaigns.

Leave a Reply

GET A FREE INBOUND MARKETING AUDIT FROM MONKS

Want to know how to optimize your website to get more traffic and leads? Ask our certified inbound marketing specialist for a free one time assessment.

Recent Posts