Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

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

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. WebbyMonks studied the report given by Mobify and figured out that there are some myths that have been shockingly busted.

{{cta(’46bf9272-ee9f-43e4-bc74-a38cf9a3f887′)}}

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 sliderFull screen slidersContent + image
Content slider, without imageVideo slider / Video backgroundThumbnail slider
Partial view slidesCentre sliderAnimated slider
Slider with bullets / Navigation arrowsAuto rotate, auto play, rotate in cycleResponsive
Touch supportSlider in light boxCarousel-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?

FeaturesYes/ NOFeaturesYes/ NO
Horizontal / VerticalYes (Only Horizontal)Image and video as backgroundYes
ResponsiveYesAuto play pauseYes
Touch supportYesThumbnailYes
Audio video supportYesFull screenNo
Custom NavigationNoPartial slidesNo
Parallax supportNoEdibility ContentYes
PaginationYesLooping / carouselYes
Light boxYesAnimation /TransitionYes
Duration of slidesYesAPI Call-backNo

Key Observation at WebbyMonks

  • HubSpot COS/CMS lets us create global module that could be used to create sliders, which have to appear often across multiple 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:

{{cta(’46bf9272-ee9f-43e4-bc74-a38cf9a3f887′)}}

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 WebbyMonks, 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.

The following two tabs change content below.
Dev Shah
Dev is the Head of Marketing for HubSpot Development at WebbyMonks where he helps agencies towards Inbound Marketing tips and lead nurturing mantras. 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

Your email address will not be published. Required fields are marked *

Get your One time On-Page SEO with Monks

WCAG

Monks are expert in thorough SEO practices. Simply fill up the below form to optimize with us and get maximum results on page performance.

Thank you

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy