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
- 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 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.
- 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
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.
- Single Item
- Multiple Items
- Responsive Display
- Slider Syncing
- Right to Left
- Variable Width
- Adaptive Height
- Data Attribute Settings
- Center Mode
- Lazy Loading
- Add & Remove
CDN for Slick slider-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
Codepen link- https://codepen.io/elethompson/pen/GpXXXW
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.
- Library Agnostic
- Parallax Transitions
- Virtual Slides
- Full Navigation Control
- Mutation Observer
- Multi-Row Slides Layout
- Images Lazy Loading
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
So, if you are looking for a clean and effective slider for your website, then you can add Splide in your checklist.
- Events and Methods
- Arrows styles
- Easy Accessibility
- Autoplay Feature
- Auto Width Feature
CDN for Splide slider-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@email@example.com/dist/css/splide.min.css ">
<script src="https://cdn.jsdelivr.net/npm/@firstname.lastname@example.org/dist/js/splide.min.js "></script>
Codepen link- https://codepen.io/adamjohnson/pen/mdVVeXX
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.
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.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
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.
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.