Image Link Carousel
Field
Field Type
Field Name
Instructions
Block Data
tab
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Button Type
select
button_type
Button Color
select
button_color
Button Link
link
button_link
Slides from
button_group
slides_from
If you want to select data populated dynamic than select from Dynamic which will fetch latest 10 case study data from selected Case study category. Or if you want to add manually all slides than choose Manual option.
Slides
repeater
slides
-- Slide image
image
slide_image
Upload image having size 1280 X 715px
-- Slide title
text
slide_title
-- Slide Link
link
slide_link
Dynamic Slides
taxonomy
dynamic_slides
Please case study category from which you would like to display case studuies in this carousel.
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-imagelink-carousel{
padding: 3em 0;
@include bp($lg){
padding: 6em 0;
}
.heading-row{
align-items: center;
margin-bottom: rem-calc(20);
@include bp($lg){
margin-bottom: rem-calc(40);
}
}
.heading{
font-size: rem-calc(24);
line-height: rem-calc(32);
letter-spacing: 0.02em;
font-weight: 400;
margin-bottom: 0;
@include bp($lg){
font-size: rem-calc(32);
line-height: rem-calc(40);
}
}
.heading-col{
padding-bottom: rem-calc(20);
@include bp($md){
padding-bottom: 0;
}
> *{
max-width: rem-calc(526);
}
}
.content-col{
color: $black2;
@include bp($md){
display: flex;
justify-content: flex-end;
}
.btn{
margin-right: 0;
}
}
.il{
&-carousel{
display: none;
margin-bottom: rem-calc(32);
&.slick-initialized{
display: block;
}
}
&-slide{
text-decoration: none;
position: relative;
border-radius: rem-calc(16);
overflow: hidden;
display: block;
color: $black;
border: 1px solid #9F9F9F;
padding: rem-calc(8);
background-color: $white;
@include bp($md){
margin: rem-calc(0 12);
}
@include bp($lg){
border-radius: rem-calc(32);
padding: 8px;
background-color: $white;
}
&-image-wrapper{
overflow: hidden;
position: relative;
margin-bottom: rem-calc(16);
padding-top: calc( calc( 210 / 398 ) * 100% );
border-radius: rem-calc(16);
picture img{
transform: scale(1);
transition: 0.3s ease transform;
}
@include bp($lg){
margin-bottom: rem-calc(20);
border-radius: rem-calc(32);
}
}
&-content{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: rem-calc(12);
padding: rem-calc(0 12);
@include bp($lg){
margin-bottom: rem-calc(22);
padding: rem-calc(0 22);
}
}
&-heading{
font-size: rem-calc(20);
line-height: rem-calc(24);
font-weight: 400;
letter-spacing: 0.05em;
padding-right: rem-calc(10);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: 0.3s ease color;
@include bp($lg){
font-size: rem-calc(24);
line-height: rem-calc(44);
}
}
&:hover{
.il-slide-image-wrapper{
picture img{
transform: scale(1.1);
}
}
.il-slide-heading{
color: $orange;
}
.btn-arrow-only{
background-color: $orange;
}
}
}
}
&.bg--primary{
.overline,
.heading,
.content-col{
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");
}
}
}
}
@include bp($md){
.slick-list{
margin: 0 -12px;
}
}
.slick--arrow-wrap .slides--numbers{
display: none;
}
}import 'slick-carousel';
class ImageLinkCarousel {
/**
* 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-imagelink-carousel');
this.init();
}
init() {
var $il_carousel = $('.block-imagelink-carousel').find('.il-carousel');
var $il_progressbar = $('.block-imagelink-carousel').find('.slick--progress');
var $ilprogressBarLabel = $il_progressbar.find( '.slider__label' );
$il_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$il_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$ilprogressBarLabel.text( calc + '% completed' );
});
$il_carousel.on('init', function(event, slick) {
if(slick.slideCount>1){
var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
$il_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$ilprogressBarLabel.text( calc + '% completed' );
}
else{
$il_progressbar.hide();
}
});
$il_carousel.each(function(){
var $sliderParent = $(this).parent();
$(this).slick({
slidesToShow: 1,
arrows: true,
dots: false,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 4000,
//appendDots: $(".cs-slick-slider-dots"),
prevArrow: $sliderParent.find(".slick-arrow--prev"),
nextArrow: $sliderParent.find(".slick-arrow--next"),
rows:0,
mobileFirst: true,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
}
]
});
$(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 ImageLinkCarousel();
Page Title
Page Type
Page URL
The Medical Specialist Group (MSG) UK
case-studies
T-Mobile Device Sales
case-studies
USAF Air Mobility Command
case-studies
Red Classic - Optimized Logistics Operations
case-studies
Understanding Cloud Service Models: SaaS vs. IaaS vs. PaaS
post
Demystifying Cloud as a Service: Navigating Benefits and Choosing the Right Vendor
post
Navigating the Cloud Cost Landscape: Assessing On-Premises vs. Cloud Costs with Calligo
post
What is Cloud as a Service? Exploring Definitions, Current Trends, and Future Horizons
post
Machine Learning as a Service
services
There are is no readme file with this component.