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.
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|
|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 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 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:
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.
Latest posts by Dev Shah (see all)
- How to Provide Database Driven Dynamic Content on HubSpot Web Pages? - November 29, 2017
- HubSpot – Shopify Integration: An Inbound Touch for Your Shopify Store - November 9, 2017
- Are These Clear Indications That HubSpot COS Is HubSpot CMS? - October 27, 2017