行业
There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-industries {
&__wrapper {
min-height: rem-calc(640);
@include bp($lg) {
height: rem-calc(900);
}
.swiper-container {
position: relative;
height: 100%;
}
.swiper-wrapper {
box-sizing: border-box;
> * {
box-sizing: border-box;
}
}
.swiper-slide {
position: relative;
height: auto;
.block-industries__slide .block-industries__slide-content{
visibility: hidden; //Added to fix TranslatePress translating slides not shown
}
&.swiper-slide-active {
.block-industries__slide .block-industries__slide-content{
visibility: visible; //Added to fix TranslatePress translating slides not shown
}
}
// &__inner {
// min-height: rem-calc(232);
// position: relative;
// z-index: 1;
// @include bp($lg, true) {
// min-height: rem-calc(700);
// }
// }
img {
object-fit: cover;
}
}
@include slider-navigation;
.slider-navigation {
height: rem-calc(47);
display: flex;
bottom: rem-calc(90);
z-index: 20;
padding: 0;
overflow-x: hidden;
position: absolute;
top: rem-calc(76);
left: 0;
border: none;
justify-content: flex-start;
width: calc(100% - 30px);
margin: 0;
margin-left: rem-calc(15);
margin-right: rem-calc(15);
@include bp($lg) {
top: auto;
left: auto;
position: relative;
border-bottom: 1px solid rgba(106, 106, 106, 1);
border-top: 1px solid rgba(106, 106, 106, 1);
border-left: 1px solid rgba(106, 106, 106, 1);
transform: none;
justify-content: flex-end;
width: 90%;
left: 0;
margin: 0 auto;
}
.slider-button {
display: none;
@include bp($lg) {
height: rem-calc(45);
width: rem-calc(45);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: $primary-blue;
}
}
}
.slider-pagination {
width: 100%;
gap: rem-calc(43);
backdrop-filter: none;
overflow-x: scroll;
overflow-y: hidden;
z-index: 25;
padding-left: 1rem;
padding-right: 1rem;
@include bp($lg) {
padding-left: rem-calc(20);
backdrop-filter: blur(18px);
padding-right: rem-calc(20);
}
.swiper-pagination-bullet {
width: min-content;
white-space: nowrap;
height: auto;
text-transform: uppercase;
background: none;
border-radius: 0;
color: $white;
font-weight: 400;
opacity: 1;
@include bp($lg) {
font-weight: 300;
}
&-active {
font-weight: 700;
}
}
}
}
}
&__slide {
position: relative;
height: 100%;
padding-top: 1rem;
padding-left: rem-calc(12);
padding-right: rem-calc(12);
padding-bottom: rem-calc(15);
@include bp($lg) {
padding-top: rem-calc(43);
padding-left: 0;
padding-right: 0;
}
&:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
}
&-content {
border-top: 1px solid rgba(106, 106, 106, 1);
border-left: 1px solid rgba(106, 106, 106, 1);
border-right: 1px solid rgba(106, 106, 106, 1);
border-bottom: 1px solid rgba(106, 106, 106, 1);
width: 100%;
margin: 0 auto;
padding: 0;
z-index: 10;
position: relative;
top: 0;
display: grid;
grid-template-columns: 1fr auto;
justify-content: space-between;
align-content: space-between;
height: 100%;
@include bp($lg) {
width: 90%;
height: 100%;
align-content: normal;
max-height: rem-calc(775);
border-bottom: none;
}
&-intro {
border-bottom: 1px solid rgba(106, 106, 106, 1);
padding: rem-calc(14) rem-calc(24);
grid-column: span 2;
p {
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: 5%;
color: $white;
text-transform: uppercase;
margin: 0;
padding: 0;
}
}
&-inner {
padding: rem-calc(70) rem-calc(50) rem-calc(80) 1rem;
height: 100%;
box-sizing: border-box;
grid-column: span 2;
@include bp($xl) {
max-width: 510px;
}
@include bp($lg) {
grid-column: span 1;
padding: 2rem rem-calc(49);
}
.industry-title {
font-weight: 400;
@include fluid-type(28, 56);
letter-spacing: 0%;
color: $white;
margin: 0;
padding: 0;
}
.industry-description {
color: $white;
font-weight: 400;
width: 100%;
padding: rem-calc(24 0 0);
margin-bottom: 0;
}
.industry-link {
margin-top: rem-calc(33);
&.btn--hollow {
border-color: $white;
color: $white;
background: none;
&:focus {
color: $white;
}
&:before {
display: none;
}
&:hover {
background-color: $prussian-blue;
}
}
}
}
&-posts {
max-height: rem-calc(704);
// top: rem-calc(49);
// right: 0;
max-width: 100%;
backdrop-filter: blur(18px);
box-sizing: border-box;
border-left: 1px solid rgba(255, 255, 255, 0.1);
color: $white;
overflow-x: scroll;
overflow-y: auto;
border-bottom: 1px solid rgba(106, 106, 106, 1);
padding: rem-calc(24 0 24 20);
margin-bottom: 0;
grid-column: span 2;
@include bp($lg) {
grid-column: span 1;
max-width: rem-calc(463);
overflow-x: visible;
overflow-y: visible;
margin-bottom: rem-calc(45);
padding: rem-calc(39) rem-calc(25);
border-bottom: none;
max-height: 100%;
min-width: rem-calc(463);
height: 100%;
}
&-inner-items {
display: flex;
flex-direction: row;
overflow-x: scroll;
gap: rem-calc(18);
@include bp($lg) {
overflow-x: visible;
flex-direction: column;
overflow-y: scroll;
}
}
&-inner {
width: 100%;
display: flex;
flex-direction: row;
@include bp($lg) {
flex-direction: column;
width: auto;
}
}
&-title {
display: none;
color: $white;
text-transform: uppercase;
font-weight: 500;
font-size: rem-calc(20);
line-height: rem-calc(20);
letter-spacing: 5%;
margin: 0;
padding: 0;
justify-content: space-between;
align-items: flex-start;
margin-bottom: rem-calc(20);
@include bp($lg) {
display: flex;
margin-bottom: rem-calc(40);
}
a {
color: $white;
font-weight: 400;
font-size: rem-calc(16);
line-height: rem-calc(19.5);
text-decoration: none;
border-bottom: 1px solid rgba(0, 174, 239, 1);
padding-bottom: rem-calc(5);
transition: color 0.3s ease-in-out;
&:hover {
color: rgba(0, 174, 239, 1);
}
}
}
&-inner {
&-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: rem-calc(18);
text-decoration: none;
min-width: rem-calc(320);
padding-top: 0;
border-bottom: none;
padding-right: 8px;
@include bp($lg) {
padding-top: rem-calc(26);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: rem-calc(26);
padding-right: 0;
}
&:hover {
.block-industries__slide-content-posts-inner-item-title {
color: $primary-blue;
}
}
&-image {
flex: 1 0 auto;
img {
float: left;
}
}
&-info {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
overflow: hidden;
}
&-category {
font-weight: 600;
font-size: rem-calc(10);
line-height: rem-calc(14);
letter-spacing: 5%;
color: $white;
margin: 0;
padding: 0;
text-transform: uppercase;
position: relative;
text-indent: rem-calc(10);
margin-bottom: rem-calc(8);
white-space: nowrap;
overflow: hidden;
display: inline-block;
width: 100%;
text-overflow: ellipsis;
&:before {
content: "";
display: block;
width: rem-calc(5);
height: rem-calc(5);
background: rgba(182, 230, 53, 1);
top:50%;
transform: translateY(-50%);
border-radius: 50%;
position: absolute;
left: 0;
}
}
&-title {
font-weight: 500;
font-size: rem-calc(16);
line-height: rem-calc(21);
color: $white;
margin: 0;
padding: 0;
margin-bottom: rem-calc(12);
transition: color 0.3s ease-in-out;
}
&-date {
font-weight: 300;
font-size: rem-calc(14);
line-height: rem-calc(17);
color: $white;
margin: 0;
padding: 0;
}
&:first-of-type {
padding-top: 0;
}
&:last-of-type {
padding-bottom: 0;
border-bottom: none;
}
}
}
}
}
// &-image {
// width: 100%;
// margin-bottom: rem-calc(24);
// picture {
// width: 100%;
// }
// }
}
}
class Industries {
block;
constructor(block) {
this.block = block;
this.init();
}
init() {
this.paginationElem = this.block.querySelector('.slider-pagination');
this.swiperElem = this.block.querySelector('.swiper-container');
this.prevBtnElem = this.block.querySelector('.slider-button--prev');
this.nextBtnElem = this.block.querySelector('.slider-button--next');
this.industryTitlesElem = this.block.querySelector('.industry-titles');
this.industryTitles = JSON.parse(this.industryTitlesElem.dataset.industryTitles);
this.swiper = new Swiper(this.swiperElem, {
pagination: {
el: this.paginationElem,
clickable: true,
renderBullet: (index, className) => {
return '' + this.industryTitles[index] + "";
}
},
navigation: {
nextEl: this.nextBtnElem,
prevEl: this.prevBtnElem
},
slidesPerView: 1,
effect: 'fade', // Add this line to enable fade effect
fadeEffect: { // Optional: Customize fade effect
crossFade: true
},
speed: 1000,
// loop: true,
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// breakpoints: {
// 541: {
// slidesPerView: 2.5,
// },
// 1025: {
// slidesPerView: 3.5
// },
// 1200: {
// slidesPerView: 4.5
// },
// },
on: {
slideChange: function () {
// Add active class to current nav item
const currentIndex = this.activeIndex;
const currentNavItem = document.querySelector(`.swiper-pagination-bullet:nth-child(${currentIndex + 1})`);
if (currentNavItem) {
currentNavItem.classList.add('active');
// Get the navigation container
const navContainer = currentNavItem.parentElement;
// Calculate scroll position to center the active item
const scrollLeft = currentNavItem.offsetLeft - (navContainer.offsetWidth / 2) + (currentNavItem.offsetWidth / 2);
// Smooth scroll to the position
navContainer.scrollTo({
left: scrollLeft,
behavior: 'smooth'
});
}
}
}
});
// Add click handlers to nav items
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', () => {
const slideIndex = parseInt(item.dataset.slide);
this.swiper.slideTo(slideIndex);
});
});
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-industries').forEach((block) => {
new Industries(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/industries",
"title": "Industries",
"description": "A list of industries",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-industries.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": "Industries",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": ["file:../../assets/css/industries/block-industries.css", "swiper-css"],
"viewScript": ["swiper-js", "industries"]
}
Page Title
Page Type
Page URL
There are is no readme file with this component.
