HubSpot CMS

Simple Testimonial Slider

Showcase testimonial for Hubspot is easy to display testimonials, It can be added on any page or template of Hubspot! Finally, it's a really simple way to manage testimonials on your site as Testimonials are so important to your potential customers. You can insert Testimonials content via a template code having multiple display options such as random or specific ordering.

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

0 Recommendations

View on:

GitHub

HTML + HUBL
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

<!-- TESTIMONIALS -->
<section class="testimonials">
	<div class="container">

      <div class="row">
        <div class="col-sm-12">
          <div id="customers-testimonials" class="owl-carousel">
            {% for item in module.slider_items %}
            <!--TESTIMONIAL 1 -->
            <div class="item">
              <div class="shadow-effect">
                	{% if item.image_field.src %}                    
                    <img src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}">
                  {% endif %}
                <p>{% inline_rich_text field="cus_content" value="{{ item.cus_content }}" %}</p>
              </div>
              <div class="testimonial-name">{% inline_text field="author_name" value="{{ item.author_name }}" %}</div>
            </div>
            <!--END OF TESTIMONIAL 1 -->
            {% endfor %}
          </div>
        </div>
      </div>
      </div>
    </section>
    <!-- END OF TESTIMONIALS -->
          
        
CSS
          
            .shadow-effect {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    text-align: center;
border:1px solid #ECECEC;
    box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
}
#customers-testimonials .shadow-effect p {
    font-family: inherit;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 17px 0;
    font-weight: 300;
}
.testimonial-name {
    margin: -17px auto 0;
    display: table;
    width: auto;
    background: #3190E7;
    padding: 9px 35px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
}
#customers-testimonials .item {
    text-align: center;
    padding: 50px;
        margin-bottom:80px;
    opacity: .2;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#customers-testimonials .owl-item.active.center .item {
    opacity: 1;
    -webkit-transform: scale3d(1.0, 1.0, 1);
    transform: scale3d(1.0, 1.0, 1);
}
.owl-carousel .owl-item img {
    transform-style: preserve-3d;
    max-width: 90px;
    margin: 0 auto 17px;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
#customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span {
    background: #3190E7;
    transform: translate3d(0px, -50%, 0px) scale(0.7);
}
#customers-testimonials.owl-carousel .owl-dots{
display: inline-block;
width: 100%;
text-align: center;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot{
display: inline-block;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot span {
    background: #3190E7;
    display: inline-block;
    height: 20px;
    margin: 0 2px 5px;
    transform: translate3d(0px, -50%, 0px) scale(0.3);
    transform-origin: 50% 50% 0;
    transition: all 250ms ease-out 0s;
    width: 20px;
}
          
        
JS
          
            jQuery(document).ready(function($) {
    "use strict";
    //  TESTIMONIALS CAROUSEL HOOK
    $('#customers-testimonials').owlCarousel({
        loop: true,
        center: true,
        items: 3,
        margin: 0,
        autoplay: true,
        dots:true,
        autoplayTimeout: 8500,
        smartSpeed: 450,
        responsive: {
          0: {
            items: 1
          },
          768: {
            items: 2
          },
          1170: {
            items: 3
          }
        }
    });
});
          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

HubSpot

Testimonial Slider


Description:

Showcase testimonial for Hubspot is easy to display testimonials, It can be added on any page or template of Hubspot! Finally, it's a really simple way to manage testimonials on your site as Testimonials are so important to your potential customers. You can insert Testimonials content via a template code having multiple display options such as random or specific ordering.

Template Usage code

{% module "module_158021226831952" path="/Custom Slider", label="Custom Slider" %}

Basic Input Feilds:

  • Image
  • Testimonial title or Tagline
  • Testimonial content or Review message
  • Reviewer name(Author)

Features:

  • Fully Responsive and Mobile friendly.
  • Add maximum 9 testimonials.
  • AutoPlay.
  • Insert the generated template code.
  • Easy to customize and stylize.
  • Extremely user-friendly settings panel for coders and non-coders alike.
  • And much more options.

SUPPORT

If you find any issue or need help, please ask us. We are active in https://help.hubspot.com/ Support Forum.

 
0 Recommendations

BitCot

www.bitcot.com

BitCot delivers digital products for all businesses by building mobile apps, Web tools, SaaS platforms to drive digital growth for success.

View BitCot’s Gallery (5 Entries)

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co