@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../node_modules/slick-carousel/slick/slick.scss";
.block-resources-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);
}
}
.overline{
margin-bottom: rem-calc(16);
}
.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(40);
line-height: rem-calc(64);
}
}
.rc{
&-carousel{
display: none;
margin-bottom: rem-calc(32);
&.slick-initialized{
display: block;
}
}
&-slide{
position: relative;
border-radius: rem-calc(16);
overflow: hidden;
display: block;
color: $black;
border: 1px solid #9F9F9F;
padding: rem-calc(20 16);
@include bp($md){
margin: rem-calc(0 12);
padding: rem-calc(40 32);
}
@include bp($lg){
border-radius: rem-calc(40);
}
}
}
.resource-card{
&__overline{
font-weight: 600;
font-size: rem-calc(12);
line-height: rme-calc(28);
letter-spacing: 0.2em;
color: $black;
margin-bottom: rem-calc(8);
text-transform: uppercase;
}
&__heading{
font-weight: 400;
font-size: rem-calc(20);
line-height: rem-calc(28);
letter-spacing: 0.05em;
margin-bottom: rem-calc(16);
a{
text-decoration: none;
color: $black;
transition: 0.3s ease-in-out color;
&:hover{
color: $orange;
}
}
}
&__meta{
font-weight: 400;
font-size: rem-calc(14);
line-height: rem-calc(16);
letter-spacing: 0.05em;
margin-bottom: rem-calc(16);
@include bp($md){
font-size: rem-calc(16);
}
.read-time{
position: relative;
padding-left: rem-calc(28);
&::before{
content: "";
position: absolute;
width: rem-calc(16);
height: rem-calc(16);
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58065 0 0 3.58065 0 8C0 12.4194 3.58065 16 8 16C12.4194 16 16 12.4194 16 8C16 3.58065 12.4194 0 8 0ZM14.9677 8C14.9677 11.8387 11.8387 14.9677 8 14.9677C4.16129 14.9677 1.03226 11.871 1.03226 8C1.03226 4.19355 4.12903 1.03226 8 1.03226C11.8065 1.03226 14.9677 4.16129 14.9677 8ZM10.1613 10.871C10.3226 11 10.5806 10.9355 10.6774 10.7742L10.9677 10.4194C11.0968 10.2258 11.0323 10 10.871 9.87097L8.6129 8.22581V3.48387C8.6129 3.29032 8.41935 3.09677 8.22581 3.09677H7.77419C7.54839 3.09677 7.3871 3.29032 7.3871 3.48387V8.64516C7.3871 8.77419 7.41935 8.87097 7.51613 8.96774L10.1613 10.871Z' fill='black'/%3E%3C/svg%3E%0A");
}
}
}
&__author{
display: flex;
flex-direction: row;
align-items: center;
color: $black;
&-image{
width: rem-calc(32);
height: rem-calc(32);
margin-right: rem-calc(16);
border-radius: 100%;
overflow: hidden;
}
&-name{
font-weight: 600;
font-size: rem-calc(14);
line-height: rem-calc(16);
letter-spacing: 0.05em;
@include bp($md){
font-size: rem-calc(16);
}
}
}
}
&.bg--primary{
.overline,
.heading{
color: $white;
}
.rc{
&-slide{
border: 1px solid rgba(255, 255, 255, 0.2);
}
}
.resource-card{
&__overline{
color: $white;
}
&__heading{
a{
color: $white;
&:hover{
color: $orange;
}
}
}
&__meta{
color: $white;
.read-time{
&::before{
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58065 0 0 3.58065 0 8C0 12.4194 3.58065 16 8 16C12.4194 16 16 12.4194 16 8C16 3.58065 12.4194 0 8 0ZM14.9677 8C14.9677 11.8387 11.8387 14.9677 8 14.9677C4.16129 14.9677 1.03226 11.871 1.03226 8C1.03226 4.19355 4.12903 1.03226 8 1.03226C11.8065 1.03226 14.9677 4.16129 14.9677 8ZM10.1613 10.871C10.3226 11 10.5806 10.9355 10.6774 10.7742L10.9677 10.4194C11.0968 10.2258 11.0323 10 10.871 9.87097L8.6129 8.22581V3.48387C8.6129 3.29032 8.41935 3.09677 8.22581 3.09677H7.77419C7.54839 3.09677 7.3871 3.29032 7.3871 3.48387V8.64516C7.3871 8.77419 7.41935 8.87097 7.51613 8.96774L10.1613 10.871Z' fill='white'/%3E%3C/svg%3E%0A");
}
}
}
&__author{
color: $white;
}
}
}
@include bp($md){
.slick-list{
margin: 0 -12px;
}
}
.slick--arrow-wrap .slides--numbers{
display: none;
}
}
import 'slick-carousel';
class ResourceCarousel {
/**
* 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-resources-carousel');
this.init();
}
init() {
var $rc_carousel = $('.block-resources-carousel').find('.rc-carousel');
var $rc_progressbar = $('.block-resources-carousel').find('.slick--progress');
var $rcprogressBarLabel = $rc_progressbar.find( '.slider__label' );
$rc_carousel.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$rc_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$rcprogressBarLabel.text( calc + '% completed' );
});
$rc_carousel.on('init', function(event, slick) {
if(slick.slideCount>1){
var calc = ( (slick.currentSlide+1) / (slick.slideCount) ) * 100;
$rc_progressbar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$rcprogressBarLabel.text( calc + '% completed' );
}
else{
$rc_progressbar.hide();
}
});
$rc_carousel.each(function(){
var $rcsliderParent = $(this).parent();
$(this).slick({
infinite: true,
slidesToShow: 1,
arrows: true,
dots: false,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 4000,
//appendDots: $(".cs-slick-slider-dots"),
prevArrow: $rcsliderParent.find(".slick-arrow--prev"),
nextArrow: $rcsliderParent.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){
$rcsliderParent.find('.slides--numbers .active').html(currentSlide + 1);
});
var rcsliderItemsNum = $(this).find('.slick-slide').not('.slick-cloned').length;
$rcsliderParent.find('.slides--numbers .total').html(rcsliderItemsNum);
});
}
}
new ResourceCarousel();
This component is not currently used on any pages.