Testimonial Carousel
REVIEWS
See what our clients say about us
The difference working with Calligo was the team’s mindset. They looked at the problem entirely as a commercial question, not as a data science challenge applied in a business context. And it worked.”
Our Solve My Bycatch Problem tool is a resource for fisheries stakeholders to understand how to reduce risk to vulnerable ocean wildlife. But it’s only really valuable if people use it. The eye-catching design and easy user interface that Calligo created will help ensure that the right people get the information they need.
Field
Field Type
Field Name
Instructions
Block Data
tab
Overline
text
overline
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Select Testimonials
relationship
testimonials
Bottom Heading
text
bottom_heading
Button Type
select
button_type
Button Color
select
button_color
Button Link
link
button_link
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../node_modules/slick-carousel/slick/slick.scss";
.block-testimonial-carousel{
padding: 3em 0;
@include bp($lg){
padding: 6em 0;
}
.heading{
font-size: rem-calc(24);
line-height: rem-calc(32);
letter-spacing: 0.02em;
font-weight: 400;
@include bp($lg){
font-size: rem-calc(40);
line-height: rem-calc(40);
}
}
.heading-col{
margin-bottom: rem-calc(24);
@include bp($lg){
margin-bottom: rem-calc(48);
}
}
&-wrap{
position: relative;
background: $grey-tertiary;
border-radius: 24px;
padding: rem-calc(32 16);
@include bp($lg){
padding: rem-calc(56 48);
border-radius: 40px;
}
}
.tt{
&-slide{
.quote-icon{
margin-bottom: rem-calc(28);
@include bp($lg){
margin-bottom: rem-calc(64);
}
}
&-wrap{
display: flex;
flex-direction: column-reverse;
@include bp($lg){
flex-direction: row;
align-items: center;
}
}
&-content{
font-size: rem-calc(18);
line-height: rem-calc(26);
letter-spacing: 0.05em;
@include bp($lg){
font-size: rem-calc(24);
line-height: rem-calc(32);
&.has-logo{
width: 64%;
padding-right: rem-calc(74);
}
}
p{
font-size: rem-calc(18);
line-height: rem-calc(26);
letter-spacing: 0.05em;
@include bp($lg){
font-size: rem-calc(24);
line-height: rem-calc(32);
}
&.tt-slide-by{
font-size: rem-calc(18);
line-height: rem-calc(26);
letter-spacing: 0.05em;
margin: 0;
@include bp($lg){
font-size: rem-calc(20);
line-height: rem-calc(32);
width: 64.91%;
padding-right: rem-calc(74);
}
}
}
}
&-image{
margin: 0 auto rem-calc(56) auto;
max-width: rem-calc(200px);
@include bp($md){
max-width: rem-calc(300px);
}
@include bp($lg){
margin: 0;
}
}
}
}
&-footer{
display: flex;
flex-direction: column;
color: $white;
padding:rem-calc(64 32 24 32);
align-items: center;
border-radius: 24px;
margin-top: rem-calc(32);
@include bp($md){
margin-top: -40px;
flex-direction: row;
justify-content: space-between;
border-top-left-radius: 0;
border-top-right-radius: 0;
align-items: center;
}
@include bp($lg){
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer-heading{
font-weight: 300;
font-size: rem-calc(24);
line-height: rem-calc(32);
letter-spacing: 0.05em;
color: $white;
flex: 1;
margin-bottom: rem-calc(24);
@include bp($md){
margin-bottom: 0;
}
@include bp($lg){
font-size: rem-calc(32);
line-height: rem-calc(40);
}
}
.footer-cta{
color: $white;
.btn--hollow.btn--primary{
color: $white;
border-color: $white;
margin-right: 0;
font-size: rem-calc(14);
line-height: rem-calc(17);
letter-spacing: 0.15em;
@include bp($lg){
font-size: rem-calc(16);
line-height: rem-calc(19);
}
&:hover{
background-color: $white;
color: $primary;
}
}
}
}
.slick--arrow-wrap .slides--numbers{
display: none;
}
.slick--progress{
background-color: $white;
}
}import '../../node_modules/slick-carousel/slick/slick';
class TestimonialCarousel {
/**
* Create and initialise objects of this class
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
* @param {object} block
*/
constructor() {
this.blocks = document.querySelectorAll('.block-testimonial-carousel');
this.init();
}
init() {
var $testimonial_carousel = $('.block-testimonial-carousel').find('.tt-carousel');
var $tt_progressbar = $('.block-testimonial-carousel').find('.slick--progress');
var $ttprogressBarLabel = $tt_progressbar.find( '.slider__label' );
$testimonial_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$tt_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$ttprogressBarLabel.text( calc + '% completed' );
});
$testimonial_carousel.on('init', function(event, slick) {
if(slick.slideCount > 1){
var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
$tt_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$ttprogressBarLabel.text( calc + '% completed' );
}
else{
$tt_progressbar.hide();
}
});
$testimonial_carousel.each(function(){
var $sliderParent = $(this).parent();
$(this).slick({
slidesToShow: 1,
arrows: true,
dots: false,
slidesToScroll: 1,
autoplaySpeed: 4000,
prevArrow: $sliderParent.find(".slick-arrow--prev"),
nextArrow: $sliderParent.find(".slick-arrow--next"),
rows:0,
});
$(this).on('afterChange', function(event, slick, currentSlide){
$sliderParent.find('.slides--numbers .active').html(currentSlide + 1);
});
var sliderItemsNum = $(this).find('.slick-slide').not('.slick-cloned').length;
$sliderParent.find('.slides--numbers .total').html(sliderItemsNum);
});
}
}
new TestimonialCarousel();
Page Title
Page Type
Page URL
Data Protection Officer (DPO) as a Service
services
Data Visualization as a Service
services
Machine Learning as a Service
services
There are is no readme file with this component.