webdew-logo-new_v2-1
   
webdew-logo-new_v2-1
Close
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
website-green-icon
Websites
  • Website Designing
  • Website Development
  • Website Migration
  • HubSpot Website
  • WordPress Website
  • Growth-Driven Design
video-blue-icon
Videos
  • 3D Videos
  • 2D Animation
  • Whiteboard Animation
  • Video Ads
  • Explainer Videos
  • Testimonial Videos
  • Onboarding Videos
  • Tutorial Videos
  • Social Media Videos
  • Product Demo Videos
marketing-yellow-icon
Marketing
  • Inbound Marketing
  • Inbound Consulting
  • Marketing Automation
  • Search Engine Optimization
  • Brand Domains
hubspot-red-icon
HubSpot
  • HubSpot Apps
  • HubSpot Themes
  • HubSpot Migration
  • HubSpot Onboarding
  • HubSpot Management
  • HubSpot Development
  • HubSpot Audit
  • Free HubSpot Demo
  • HubSpot Diamond Partner
webdew-logo-new_v2-1
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

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

How to use carousel animation in HubSpot (5 best slider animation)-vbh
Tag: HubSpot
Author: Sonu Kumar
Sonu Kumar
Quick Links

Subscribe to Our Blog

Never Miss Any Update From Us !

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

Top 10 HubSpot management service providers

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.

owl-carouselFeatures- 

  • 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-

<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

How can content creators make the best of HubSpot default modules?

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. 

slick-sliderFeatures-

  • 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-

<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

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.

swiper-slider

Features-

  • 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

Create website with HubSpot CMS Boilerplate: A comprehensive guide

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. 

splide-javascript-slider

Features-

  • 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/@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 

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. 

bootstrap-carousel

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. 

HubSpot Tutorials by webdew

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-

<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-

cdn-linking

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- 

template-cd-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.

Top 10 most frequently asked questions by HubSpot users

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. 

Top 10 Tips to Hire HubSpot Expert for Business Growth

Related Blogs

Google places autocomplete implementation: A step by step guide-vbh
Websites

Google places autocomplete implementation: A step by step guide

How to implement recurring payment with stripe: A complete guide-vbh
Websites

How to implement recurring payment with stripe: A complete guide

How to create UX modules in HubSpot Boilerplate using external assets?-vbh
HubSpot

How to create UX modules in HubSpot Boilerplate using external assets?

review-star

Based on 1000+ Reviews on

footer-dot-logo-img
  • Hubspot_Logo-icon
  • clutch_Logo-icon
  • upwork_Logo-icon
  • designrush_Logo-icon
  • goodfirms_Logo-icon
  • g2_Logo-icon
WE ARE GLOBAL
  • US-flag
  • CA-flag
  • IN-flag
  • GB-flag

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

Copyright © 2019 - 2021 Webdew Labs Inc. All Rights Reserved

Copyright © 2016 - 2021 Webdew Private Limited. All Rights Reserved

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

WE ARE SOCIAL
  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
Terms of Services
Privacy Policy