Case Study Carousel
Field
Field Type
Field Name
Instructions
Block Data
tab
Overline
text
overline
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Content
wysiwyg
content
Button Type
select
button_type
Button Color
select
button_color
Button Link
link
button_link
Slides
repeater
slides
-- Slide image
image
slide_image
Upload image having size 1280 X 715px
-- Slide logo
image
slide_logo
Upload logo which will appear above image on right top. Logo have maximum size 238 X 88 pixels.
-- Slide tag
text
slide_tag
This will appear at top left of image
-- Slide overline
text
slide_overline
-- Slide title
text
slide_title
-- Slide excerpt
textarea
slide_excerpt
-- Slide Link
link
slide_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-casestudy-carousel{
padding: 3em 0;
@include bp($lg){
padding: 6em 0;
}
.heading{
@include fluid-type(20, 40, 375, $max-container-size);
letter-spacing: 0.02em;
font-weight: 300;
strong{
font-weight: 600;
}
}
.heading-col{
@include bp($lg){
padding-bottom: rem-calc(52);
}
> *{
max-width: rem-calc(526);
}
}
.content-col{
padding-bottom: rem-calc(40);
color: $black2;
@include bp($lg){
display: flex;
justify-content: flex-end;
padding-bottom: rem-calc(52);
}
> *{
max-width: rem-calc(526);
}
p{
@include fluid-type(16, 20, 375, $max-container-size);
line-height: rem-calc(28);
letter-spacing: 0.05em;
}
.btn{
width: 100%;
margin-right: 0;
@include bp($sm){
width: inherit;
}
}
}
.cs{
&-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;
@include bp($lg){
border-radius: rem-calc(40);
padding: 8px;
background-color: $white;
}
&-image-wrapper{
overflow: hidden;
position: relative;
margin-bottom: rem-calc(16);
picture img{
border-radius: rem-calc(16);
}
@include bp($lg){
margin-bottom: 0;
picture img{
border-radius: rem-calc(40);
}
}
&::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
@include bp($lg){
display: none;
}
}
}
&-tag{
display: none;
@include bp($lg){
background-color: $white;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
padding: rem-calc(12 25 10 28);
font-weight: 600;
font-size: rem-calc(14);
line-height: rem-calc(28);
letter-spacing: 0.2em;
color: $black;
position: absolute;
display: block;
top: rem-calc(55);
left: 0;
}
}
&-logo{
position: absolute;
margin: 0 auto;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
text-align: center;
z-index: 1;
@include bp($lg){
left: auto;
right: rem-calc(32);
top: rem-calc(44);
transform: none;
}
img{
max-height: rem-calc(87);
}
}
&-content{
@include bp($lg){
position: absolute;
bottom: 0;
left: 0;
background-color: $white;
padding: rem-calc(40 50 40 40);
border-top-right-radius: 40px;
width: 100%;
max-width: 574px;
}
.overline{
margin-bottom: 8px;
}
.slide-heading{
@include fluid-type(20, 32, 375, $max-container-size);
font-weight: 400;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.slide-excerpt{
color: $black2;
margin-bottom: rem-calc(16);
line-height: rem-calc(24);
letter-spacing: 0.05em;
}
.btn{
&--tertiary{
color: $black;
&::after{
border: 1px solid $orange;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg fill='none' width='14' height='13' xmlns='http://www.w3.org/2000/svg' viewBox='-0.17 0.52 13.87 12.58'%3E%3Cpath d='M0.334961 6.80981H13.2057' stroke='%230d0d0d'%3E%3C/path%3E%3Cpath d='M7.47852 1.01758L13.2036 6.80911L7.47852 12.6013' stroke='%230d0d0d'%3E%3C/path%3E%3C/svg%3E");
}
&:hover,
&:focus {
background: transparent;
color: $black;
border: none;
&::after{
background-color: $orange;
}
}
&:active{
background: transparent;
border: none;
&::after{
background-color: $orange-light;
}
}
}
}
}
}
}
&.bg--primary{
.overline,
.heading,
.content-col{
color: $white;
}
.cs-slide-content .btn--tertiary{
&:after{
background-image: url("data:image/svg+xml,%3Csvg fill='none' width='14' height='13' xmlns='http://www.w3.org/2000/svg' viewBox='-0.17 0.52 13.87 12.58'%3E%3Cpath d='M0.334961 6.80981H13.2057' stroke='%23ffffff'%3E%3C/path%3E%3Cpath d='M7.47852 1.01758L13.2036 6.80911L7.47852 12.6013' stroke='%23ffffff'%3E%3C/path%3E%3C/svg%3E");
}
}
.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 CaseStudyCarousel {
/**
* 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-casestudy-carousel');
this.init();
}
init() {
var $cs_carousel = $('.block-casestudy-carousel').find('.cs-carousel');
var $cs_progressbar = $('.block-casestudy-carousel').find('.slick--progress');
var $csprogressBarLabel = $cs_progressbar.find( '.slider__label' );
$cs_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$cs_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$csprogressBarLabel.text( calc + '% completed' );
});
$cs_carousel.on('init', function(event, slick) {
if(slick.slideCount>1){
var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
$cs_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$csprogressBarLabel.text( calc + '% completed' );
}
else{
$cs_progressbar.hide();
}
});
$cs_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,
});
/*if ($(this).find('.cs-slide').length > 1) {
$sliderParent.find('.slides-numbers').show();
}*/
$(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 CaseStudyCarousel();
Page Title
Page Type
Page URL
The Government of Jersey
case-studies
There are is no readme file with this component.