@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-logo-slider {
padding: 2rem;
background: $grey-4;
@include bp($md){
padding: 4rem;
}
&[data-curved-corners="true"]{
border-radius: 40px 40px 0 0;
overflow: hidden;
@include bp($md){
border-radius: 52px 52px 0 0;
}
&[data-image="true"]{
border-radius: 40px 40px;
@include bp($md){
border-radius: 52px 52px;
}
}
}
&[data-image="true"]{
height: 76vh;
display: flex;
align-items: flex-end;
position: relative;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(0, var(--primary), transparent);
}
&[data-gradient="blue"]{
&::before{
background: linear-gradient(0, var(--accentBlue), transparent);
}
}
.block-logo-slider__heading{
margin-bottom: 1rem;
*{
color: var(--white);
}
}
@include bp($md, true) {
max-height: rem-calc(420) !important;
}
}
&[data-border-bottom="true"]{
border-bottom: solid 1px #362E8033;
}
&.letterbox-mode {
max-height: rem-calc(570);
&::before {
background: linear-gradient(0, var(--primary), rgba($primary, 0.5));
}
}
&__background-image-container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
display: flex;
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.container{
z-index: 2;
position: relative;
}
.swiper{
overflow: visible;
}
.swiper-wrapper{
transition-timing-function : linear;
}
&__heading{
margin-bottom: 2rem;
text-align: center;
@include bp($md){
margin-bottom: 2rem;
}
*{
margin: 0;
@include fluid-type(24, 44);
font-weight: 600;
color: var(--text-color);
}
}
&__cta{
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
@include bp($md){
margin-top: 2rem;
}
}
&__logo {
display: flex;
height: auto;
border: solid 1px transparent;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
// padding: 2rem 1rem;
min-height: 18vh;
transition: .3s ease-out;
position:relative;
&::before{
content: '';
width: 24px;
height: 24px;
position: absolute;
left: 50%;
bottom: 1rem;
transform: translateX(-50%);
background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.0869' cy='11.3359' r='10.5' stroke='%23383551'/%3E%3Cpath d='M14.3867 15.3359L17.5867 11.3359L14.3867 7.33594' stroke='%23383551'/%3E%3Cpath d='M17.5869 11.3359L4.58691 11.3359' stroke='%23383551'/%3E%3C/svg%3E%0A");
background-position: center;
background-size: contain;
opacity: 0;
background-repeat: no-repeat;
transition: .3s ease-out;
}
&:hover{
background: var(--white);
transform: scale(1.025);
border: solid 1px #362E8033;
transition: .3s ease-out;
&::before{
opacity: 1;
transition: .3s ease-out;
}
.logo-dark {
opacity: 1;
}
.logo-light {
opacity: 0;
}
}
img {
width: 24vw;
max-width: 140px;
}
}
.logo-dark,
.logo-light {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .3s ease-out;
}
.logo-dark {
opacity: 0;
}
&[data-gradient="blue"],
&[data-gradient="purple"]{
.block-logo-slider__cta .btn{
color: var(--white);
text-align: center;
&:after {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='27' viewBox='0 0 18 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.870117 19.6006L8.87012 26.0006L16.8701 19.6006' stroke='%23fff'/%3E%3Cpath d='M8.87011 26L8.87012 0' stroke='%23fff'/%3E%3C/svg%3E%0A");
border-color: var(--white);
}
&:hover {
color: var(--secondary);
&:after {
border-color: var(--secondary);
}
}
}
}
}
class LogoSlider {
/**
* 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-logo-slider');
this.init();
}
/**
* Example function to run class logic
* Can access `this.block`
*/
init() {
this.blocks.forEach((block) => {
const logoSlide = block.querySelector('.block-logo-slider__slider-wrap');
const totalSlides = logoSlide.querySelectorAll('.swiper-slide').length;
if(logoSlide){
const swiper = new Swiper(logoSlide, {
slidesPerView: 1.5,
autoplay:{
delay: 0,
pauseOnMouseEnter: true
},
speed: 6000,
loop: true,
centeredSlides: true,
centerInsufficientSlides: true,
breakpoints: {
460: {
spaceBetween: 16,
slidesPerView: 2,
loop: totalSlides > 2,
centeredSlides: true,
centeredSlidesBounds: true,
autoplay: totalSlides > 2 ? {
delay: 0,
pauseOnMouseEnter: true
} : false,
},
767: {
spaceBetween: 32,
slidesPerView: 3,
loop: totalSlides > 3,
centeredSlides: true,
centeredSlidesBounds: true,
autoplay: totalSlides > 3 ? {
delay: 0,
pauseOnMouseEnter: true
} : false,
},
992: {
slidesPerView: 4,
loop: totalSlides > 4,
centeredSlides: true,
centeredSlidesBounds: true,
initialSlide: Math.floor(totalSlides / 2),
autoplay: totalSlides > 4 ? {
delay: 0,
pauseOnMouseEnter: true
} : false,
},
1024: {
slidesPerView: 5,
loop: totalSlides > 5,
centeredSlidesBounds: true,
initialSlide: Math.floor(totalSlides / 2),
autoplay: totalSlides > 5 ? {
delay: 0,
pauseOnMouseEnter: true
} : false,
}
},
});
}
});
}
}
document.addEventListener('DOMContentLoaded', () => {
new LogoSlider();
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/logo-slider",
"title": "Logo Slider",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-logo-slider.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": [
"file:../../assets/css/logo-slider/block-logo-slider.css",
"swiper"
],
"viewScript": ["logo-slider", "swiper"]
}