How to use carousel animation in HubSpot.

Are you looking for the best way to improve the experience of your website visitors? If yes, then consider adding a carousel to your website.

Website carousel sliders are one of the easiest and most great ways to feature content through text and images without using much space. Also, it helps in catching the attention of visitors to your site.

Designing the carousel in a well-defined way highlights not only the content features but also improves the overall user experience. If you have websites using HubSpot CMS, then using slider animation on the website will be the easiest task. Almost every slider follows the same approach to be used on websites.

Here is the list of sliders that you can add to your website-

Owl Carousel
Slick Slider
Swiper Slider
Splide Javascript Slider
Bootstrap Carousel

Are you excited to know more about slider animation in HubSpot? Let's dive in.

In this article, you will get to know how you can use each slider on your website within a few clicks. Now, without any further ado, let's follow the steps.

How to use carousel animation in HubSpot?

Step-1 Create a Custom module

Whenever you begin creating sliders, firstly, you have to create a module in the design tool. If you are creating a module for a website, you have to build this module inside your theme folder.

Say if you don't know how to create and edit a module in HubSpot, then you can refer to this document. Following the steps added in this blog will help you build modules from scratch or add pre-build modules from the HubSpot marketplace.

Step-2 Add Codepen Code

Once the modules are created, it's time to use and add Codepen code in the module where you want to add the slider. You can also use CDN files in the Codepen to ensure the animation is done accurately.

I have jotted down the codes and explained each slider which will surely help you proceed further.

Owl Carousel

Owl carousel is an enabled jQuery, which helps you to create different types of sliders. If you want to display the content more beautifully, then you can prefer to add this slider to your module.

Features-

Set sliders as per particular viewport
Lazy load animation
The autoplay slide feature
Vide options
Auto height adjustment
Using external libraries.

CDN for Owl Sliders-

Codepen link- https://codepen.io/velrke/pen/jjdgBO

Slick Slider

A slick slider is a fully responsive slider that can easily be scaled with its containers. In this slick slider, we get an option to separate settings according to the breakpoints.

In this slider, you will get various editing options such as Swipe enabled Or Disabled Mouse dragging and infinite looping, etc.

Features-

Single Item
Multiple Items
Responsive Display
Filtering
Destroy
Slider Syncing
Right to Left
Variable Width
Adaptive Height
Data Attribute Settings
Center Mode
Lazy Loading
Autoplay
Fade
Add & Remove

CDN for Slick slider-

Codepen link- https://codepen.io/elethompson/pen/GpXXXW

Swiper Slider

Swiper is the most modern free mobile touch slider with hardware-accelerated transitions and amazing native behavior. This slider is primarily used in mobile websites, web apps, and native/hybrid apps.

Features-

Library Agnostic
Parallax Transitions
Virtual Slides
Full Navigation Control
Mutation Observer
Multi-Row Slides Layout
Images Lazy Loading

CDN for Swiper slider-

Codepen link- https://codepen.io/CharmLuu/pen/KWKdEX

Splide Javascript Slider

Splide is another common slider animation used by people. It is a lightweight, powerful and flexible slider purely written in JavaScript without any dependencies.

So, if you are looking for a clean and effective slider for your website, then you can add Splide in your checklist.

Features-

Events and Methods
Arrows styles
Easy Accessibility
Autoplay Feature
Auto Width Feature

CDN for Splide slider-

Codepen link- https://codepen.io/adamjohnson/pen/mdVVeXX

Bootstrap Carousel

Bootstrap carousel is a lightweight extension component that helps in adding multiple items per slide. Also, it has the power to advance one slide at one particular time.

This Bootstrap Carousel is built with CSS 3D transforms and a bit of JavaScript, which helps in showcasing the content in the best possible way.

It offers excellent support for indicators and controls. Along with this, it offers a series of text, images, and custom markup, which help you in showcasing the information more effectively.

Step-3 Preview the slider

Once you successfully add the content in the slider, then you need to ensure that it is showcased accurately on the web. So, before you make anything live, make sure you check its preview link.

If everything is fine, then you can make it live.

How to add a slider on a website?

Basically, there are two reasons to add a slider to a website.

Approach-1 If you are using the HubSpot theme in boilerplate, then add a CDN file in your base file.

CDN-

Codepen link- https://codepen.io/adethrax/pen/zxQveq

You can refer to the below screenshot to implement this approach more professionally.

CDN linking in base file-

Approach-2 If you are using the old version of the HubSpot template, then add CDN files in the head section of the template.

Template CDN Linking-

Note- Ignore using CDN files in the modules as it may conflict with other modules that are related to the same slider if used in two different phases.

Conclusion

Adding sliders to your website is indeed the most trending way to highlight the content and catch visitors' eye. Through carousels, you can display any form of content on your website in minimum space.

Well! creating a slider in the new HubSpot CMS and using it on the website accurately is not a cakewalk. but hopefully, the above information will help you implement this step more professionally and easily.

So, get ready to give a boost to your website with appealing carousels. Still, if you have any concerns, feel free to contact our HubSpot experts.

Websites

Videos

Marketing

HubSpot

How to use carousel animation in HubSpot (5 best slider animation)

Quick Links