Do website sliders capture your attention? But are you hesitant to incorporate them into your site due to performance concerns raised by critics?
Website sliders are one of the most popular tools for capturing visitors' attention. However, critics argue that they can have a negative impact on a website's performance, leading to slower page load times.
The good news is that this concern is easily addressed by following best practices when adding sliders to your website.
Designing the carousel in a well-defined way highlights not only the content features but also improves the overall user experience. If you're managing websites on HubSpot CMS, then using carousel images becomes an easier task.
In this article, we'll talk about how to use Carousel Animation in HubSpot. We'll check out some of the best ones and share the best ways to make sure they fit smoothly into your site.Â
How to use Carousel Animation in HubSpot?
Let's explore the steps to add carousel animation to your HubSpot website.
Step-1: Create a Custom Module
A custom-coded module in HubSpot refers to a specific component of a website that has been created using custom code like HTML, CSS, and sometimes JavaScript. When you design a website in HubSpot, you often use modules to structure and organize content.
While HubSpot provides a variety of pre-built modules, some functionalities require custom code to meet specific design requirements. That's where custom-coded modules come into play, offering you more flexibility and customization options.
To add the slider to your HubSpot website, you may either prefer pre-built modules or custom modules.
Let's talk about adding sliders. The first step is to create a module in your design manager tool. If it's for a website, make sure to create this module within your theme folder.
If you're unsure about creating or editing a module in HubSpot, check out this document for guidance. By following the steps outlined in this blog, you'll be able to create modules from scratch or incorporate pre-built modules from the HubSpot marketplace.
Step-2: Add CodePen Code to Carousel Sliders
After creating the modules, the next step is to incorporate CodePen code into the specific module where you intend to include the slider. Additionally, you have the option to utilize CDN files in CodePen to ensure precise animations.
CodePen is an online platform that allows developers to create and share front-end web development code snippets, also known as “pens.” A CodePen code refers to the HTML, CSS, and JavaScript code written and showcased within a CodePen project.
I've documented the codes and provided explanations for each slider to guide you through the next steps.
1. Owl Carousel
The Owl Carousel is a popular and versatile jQuery tool that facilitates the creation of responsive and customizable sliders or carousels for websites. This powerful tool has gained popularity among web developers for its simplicity and rich features.
Key Features
CDN for Owl Carousel Slider
<script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”></script>
<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js”></script>
CodePen link– https://codepen.io/velrke/pen/jjdgBO
2. Slick Slider
Slick Carousel is a feature-rich and highly customizable jQuery plugin designed for creating sleek, responsive, and user-friendly sliders or carousels on websites. It is renowned for simplicity, smooth transitions, and an extensive set of options.
Within this slider, you'll find a range of editing choices, including Swipe enabled or Disabled Mouse dragging, infinite looping and more.
Key Features
CDN for Slick slider
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css“>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js“></script>
CodePen link- https://codepen.io/elethompson/pen/GpXXXW
3. Swiper Slider
Swiper is the most modern free mobile touch slider with hardware-accelerated transitions and amazing native behaviour. This slider is primarily used in mobile websites, web apps, and native/hybrid apps.
Key Features
CDN for Swiper Slider
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css<script src=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js “></script>
CodePen link– https://codepen.io/CharmLuu/pen/KWKdEX
4. Splide Javascript Slider
Splide is a lightweight, powerful and highly customizable JavaScript slider library that provides a simple and efficient way to create responsive and feature-rich sliders for web applications.
It is designed to be easy to use and comes with a variety of built-in features that make it suitable for creating image sliders, carousels, and more.
Key Features
CDN for Splide Slider
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/@splidejs/splide@2.3.1/dist/css/splide.min.css “>
<script src=”https://cdn.jsdelivr.net/npm/@splidejs/splide@2.3.1/dist/js/splide.min.js “></script>
Codepen link– https://codepen.io/adamjohnson/pen/mdVVeXX
5. 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 a 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.
Notably, it provides robust support for both 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.
Key Features
Now that you've added the slider, let's move to the next step.
Step-3: Preview the Slider
After successfully adding content to the slider, it's crucial to verify its accurate presentation on the web. Before making it live, review the preview link to ensure everything appears as intended. Once you've confirmed that all is well, proceed to make it live.
How to add a Slider on a Website?
There are two ways to add a slider to a website.
Approach-1: Using the HubSpot theme in boilerplate
If you are using the HubSpot theme in boilerplate, then add a CDN file in your base file.
CDN:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script>
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: Using the previous version of the HubSpot Template
If you are using the older 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.
Best Practices to Add Carousel Slider
What's the carousel of choice for your HubSpot site?
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.
Hope our insightful and detailed step-by-step instructions have helped you in creating a slider in the HubSpot CMS.
Now, which slider are you planning to try for your website following these best practices? Share your choice in the comments below.
Still, if you have any concerns, feel free to contact us for expert guidance.
Similar Posts
What Is Marketing Collateral? Know the role and types of marketing collaterals you need for business
Shopify vs Squarespace: The ultimate comparison in 2024
The power of Storytelling in Email Campaigns to boost engagement in 2024
The Art of Manual Link Building for SEO: The best Strategies in 2024
The best free and paid SEO Reporting Tools for data-driven SEO
Importance of keywords for SEO: Choose the right keywords for enhanced success
Top 31 HubSpot CMS Templates to use in 2024
11 Best AI SEO Tools for your business to try in 2024Â