Icon Carousel

BENEFITS

How can Calligo help the Finance function?

Demand Forecasting

Calligo's machine learning solutions enable efficient marketing, better product choices, and higher sales by predicting geographic demand and optimizing product selection based on regional characteristics, resulting in increased customer satisfaction and reduced losses from unproductive sales efforts.

Revenue Forecasting

Calligo's predictive models and time-series analysis provide accurate revenue forecasts, reducing losses from outlier events and enabling effective operations by considering market changes, company actions, competitor actions, consumer behavior, and external factors to stress-test projections and enhance their accuracy.

Cost and Budget Trends

Calligo's predictive models and time-series analysis provide accurate cost and budget projections, enabling better financial planning and minimizing unforeseen losses by leveraging company and external market data to account for projection uncertainty and help organizations stay within budget.

Causal Analysis

Calligo's machine learning solutions uncover subtle factors that contribute to cost and revenue fluctuations, providing a more detailed understanding and enabling businesses to implement better mitigation strategies, achieve cost savings, and make informed decisions to influence revenue generation and profitability.

Targets

Accurately projecting revenue and profit using machine learning and time-series analysis allows for better financial planning, informed decision making regarding inventory and workforce management, and reduces uncertainty associated with future targets.

Business Shifts

Predicting the impact of planned business shifts on costs, revenue, and profit using machine learning and forecast models helps ensure profitability and minimize risks associated with the changes.

1 of

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

Overline

text

overline

Heading Type

select

heading_type

Heading Text

textarea

heading_text

Slides

repeater

slides

-- Slide icon

image

slide_icon

Upload image having size 85 X 85 px maximum. If image size smaller than this than it will display in image original size.

-- Slide title

text

slide_title

-- Slide content

textarea

slide_content

Block Meta

tab

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-icon-carousel{
    padding: 3em 0;
    
    @include bp($lg){
        padding: 6em 0;
    }

    &.bg--gray-primary{
        @include bp($xl){
            padding: rem-calc(126 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(32);
            line-height: rem-calc(40);
        }
    }
    .heading-col{
        margin-bottom: rem-calc(26);

        @include bp($lg){
            margin-bottom: rem-calc(64);
        }
    }

    .icon{
        &-carousel{
            display: none;
            margin-bottom: rem-calc(32);
            @include bp($md){
                margin-bottom: rem-calc(40);
            }
            
            &.slick-initialized{
                display: block;
            }

            .slick-track{
                display: flex;
            }            
        }

        &-slide{
            width: rem-calc(321);
            border: 1px solid rgba(13, 13, 13, 0.5);
            border-radius: 32px;
            padding: rem-calc(32 24);
            height: inherit;
            margin: rem-calc(0 8);

            @include bp($md){
                padding: rem-calc(40 32 40);
                width: rem-calc(416);
                margin: rem-calc(0 12);
            }
            &-icon-wrapper{
                margin-bottom: rem-calc(36);
                height: 50px;
                display: flex;
                align-items: center;
                @include bp($md){
                    margin-bottom: rem-calc(56);
                    height: 80px;
                }
                img{
                    max-height: 50px;
                    @include bp($md){
                        max-height: 80px;
                    }
                }
            }
            .slide-heading{
                font-weight: 600;
                font-size: rem-calc(20);
                line-height: rem-calc(32);
                letter-spacing: 0.05em;
                margin-bottom: rem-calc(8);
                @include bp($md){
                    font-size: rem-calc(24);
                }
            }
            .slide-content{
                font-weight: 400;
                font-size: rem-calc(16);
                line-height: rem-calc(24);
                letter-spacing: 0.05em;
            }
        }
    }
    
    &.bg--primary{
        .overline,
        .heading{
            color: $white;
        }
        .icon-slide{
            border: 1px solid rgba(255,255,255,0.5);                        
            .slide-heading{
                color: $white;
            }
            .slide-content{
                color: $white;
            }
        }
        .slick--arrow-wrap {
            .slides--numbers{
                color: $white;
            }
            .slick-arrow{
                border-color: $white;
                &--prev{
                    margin-right: 8px;
                    background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.46875 13.8437L7.6875 13.625C7.84375 13.4688 7.84375 13.25 7.6875 13.0937L1.59375 7L7.6875 0.875C7.84375 0.71875 7.84375 0.5 7.6875 0.34375L7.46875 0.125C7.3125 -0.03125 7.09375 -0.0312501 6.9375 0.125L0.343751 6.71875C0.187501 6.875 0.187501 7.09375 0.343751 7.25L6.9375 13.8437C7.09375 14 7.3125 14 7.46875 13.8437Z' fill='white'/%3E%3C/svg%3E%0A");                
                }
                &--next{
                    background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.53125 0.15625L0.3125 0.375C0.15625 0.53125 0.15625 0.75 0.3125 0.90625L6.40625 7L0.3125 13.125C0.15625 13.2812 0.15625 13.5 0.3125 13.6562L0.53125 13.875C0.6875 14.0312 0.90625 14.0312 1.0625 13.875L7.65625 7.28125C7.8125 7.125 7.8125 6.90625 7.65625 6.75L1.0625 0.15625C0.90625 0 0.6875 0 0.53125 0.15625Z' fill='white'/%3E%3C/svg%3E%0A");
                }
            }
        }
    }    
}

import '../../node_modules/slick-carousel/slick/slick';

class IconCarousel {
	/**
	 * 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-icon-carousel');
        this.init();
	}

	init() {
        var $icon_carousel = $('.block-icon-carousel').find('.icon-carousel');
		var $icon_progressbar = $('.block-icon-carousel').find('.slick--progress');
        var $iconprogressBarLabel = $icon_progressbar.find( '.slider__label' );

        $icon_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
            var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
            $icon_progressbar
            .css('background-size', calc + '% 100%')
            .attr('aria-valuenow', calc );

            $iconprogressBarLabel.text( calc + '% completed' );
        });

        $icon_carousel.on('init', function(event, slick) {
            if(slick.slideCount>1){
                var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
                $icon_progressbar
                .css('background-size', calc + '% 100%')
                .attr('aria-valuenow', calc );

                $iconprogressBarLabel.text( calc + '% completed' );
            }
            else{
                $icon_progressbar.hide();
            }
        });

		$icon_carousel.each(function(){
            var $sliderParent = $(this).parent();
            $(this).slick({
                arrows: true,
                dots: false,
                slidesToScroll: 1,
                centerMode: true,
                autoplaySpeed: 4000,
                variableWidth: true,
                prevArrow: $sliderParent.find(".slick-arrow--prev"),
			    nextArrow: $sliderParent.find(".slick-arrow--next"),
                rows:0,
                initialSlide:0,
                mobileFirst:true,
                responsive: [
                    {
                        breakpoint: 1200,
                        settings: {
                            initialSlide:1,
                        }
                    },
                ]
            });
            
            $(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 IconCarousel();

Page Title

Page Type

Page URL

Finance

page

https://www.calligo.io/solutions/machine-learning-in-finance/

Machine Learning as a Service

services

https://www.calligo.io/services/machine-learning-as-a-service/

Backup as a Service

services

https://www.calligo.io/services/backup-as-a-service/