Skip to content

Fix glide and pattern added #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davidperezgar merged 5 commits into from
Feb 16, 2026
Merged

Fix glide and pattern added #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
11a2df4
fix glide and pattern added
Castellon-ACM Feb 10, 2026
6186f84
Add pattern in FrontBlocks
Castellon-ACM Feb 10, 2026
aab0b4c
Fix lint
Castellon-ACM Feb 10, 2026
dd92ecb
Fixed
Castellon-ACM Feb 10, 2026
b957d22
Delete important
Castellon-ACM Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 120 additions & 11 deletions assets/carousel/frontblocks-carousel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
display: flex;
flex-wrap: nowrap;
will-change: transform;
transition: transform 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.glide__slides--dragging {
user-select: none;
Expand Down Expand Up @@ -142,6 +143,26 @@
left: 50px;
right: unset;
}
/* Arrows position top/side - spans full container width */
.glide__arrows--top {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
z-index: 10;
pointer-events: none;
transform: translateY(-50%);
}
.glide__arrows--top .glide__arrow {
pointer-events: all;
}
.glide__arrows--top .glide__arrow--left {
left: 2em;
}
.glide__arrows--top .glide__arrow--right {
right: 2em;
}
/* Responsive */
@media only screen and (max-width: 768px) {
.glide__arrow--left {
Expand All @@ -159,9 +180,9 @@
*/
.wp-block-group.frontblocks-carousel,
.wp-block-group.frontblocks-carousel.is-layout-grid {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
display: block;
grid-template-columns: none;
gap: 0;
}

.wp-block-group.frontblocks-carousel > * {
Expand All @@ -170,24 +191,112 @@

/* Ensure inner container doesn't interfere with carousel */
.wp-block-group.frontblocks-carousel > .wp-block-group__inner-container {
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
display: block;
grid-template-columns: none;
gap: 0;
width: 100%;
}

/* Override grid styles for direct children in carousel mode */
.glide__slides.wp-block-group,
.glide__slides.wp-block-group.is-layout-grid {
display: flex !important;
grid-template-columns: none !important;
gap: 0 !important;
column-gap: 0 !important;
row-gap: 0 !important;
display: flex;
grid-template-columns: none;
gap: 0;
column-gap: 0;
row-gap: 0;
}

/* Ensure slides have proper width */
.glide__slides > .glide__slide {
min-width: 0;
flex-shrink: 0;
}

/* Force full width for single slide view */
.frontblocks-carousel[data-view="1"] .glide__slide {
margin-left: 0;
margin-right: 0;
}

/* Remove gaps when showing one slide */
.frontblocks-carousel[data-view="1"].glide__slides {
gap: 0;
}

/* Responsive single slide view */
@media only screen and (max-width: 768px) {
.frontblocks-carousel[data-mobile-view="1"] .glide__slide {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
.frontblocks-carousel[data-tablet-view="1"] .glide__slide {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {
.frontblocks-carousel[data-laptop-view="1"] .glide__slide {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
}

/* Handle alignfull content within carousel slides */
.glide__slide > .wp-block-cover.alignfull,
.glide__slide > .alignfull {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}

/* Ensure cover blocks maintain minimum height */
.glide__slide .wp-block-cover {
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
}

/* Prevent carousel from overflowing viewport */
.glide {
position: relative;
overflow: visible;
min-height: 430px;
}

.glide__track {
overflow: hidden;
width: 100%;
position: relative;
z-index: 1;
}

.glide__slides {
position: relative;
z-index: 1;
height: auto;
min-height: 430px;
}

.glide__slide {
position: relative;
z-index: 1;
height: auto;
opacity: 1;
visibility: visible;
}
19 changes: 13 additions & 6 deletions assets/carousel/frontblocks-carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ window.addEventListener('load', function (event) {
const carouselLaptopView = item.getAttribute('data-laptop-view') ? parseInt(item.getAttribute('data-laptop-view')) : 3;
const carouselTabletView = item.getAttribute('data-tablet-view') ? parseInt(item.getAttribute('data-tablet-view')) : 2;
const carouselMobileView = item.getAttribute('data-mobile-view') ? parseInt(item.getAttribute('data-mobile-view')) : 1;
const carouselAutoplay = item.getAttribute('data-autoplay') ? item.getAttribute('data-autoplay') : 0;
const autoplayValue = item.getAttribute('data-autoplay');
const carouselAutoplay = autoplayValue && autoplayValue !== '' ? parseInt(autoplayValue) : 0;
const carouselRewind = item.getAttribute('data-rewind') ? item.getAttribute('data-rewind') : false;
const carouselbuttonsColor = item.getAttribute('data-buttons-color') ? item.getAttribute('data-buttons-color') : 'black';
const carouselbuttonsBackgroundColor = item.getAttribute('data-buttons-background-color') ? item.getAttribute('data-buttons-background-color') : 'transparent';
Expand Down Expand Up @@ -108,22 +109,28 @@ window.addEventListener('load', function (event) {
arrows.innerHTML = arrowsHTML;
wrapperParent.appendChild(arrows);
}
// Calculate gap based on perView - use 0 gap when showing 1 slide
const calculateGap = (view) => view === 1 ? 0 : 20;

const glideFrontBlocks = new Glide(wrapperParent, {
type: carouselType,
perView: carouselView,
startAt: 0,
autoplay: carouselAutoplay === 0 ? 2500 : carouselAutoplay,
gap: 20,
autoplay: carouselAutoplay === 0 ? false : carouselAutoplay,
gap: calculateGap(carouselView),
rewind: carouselRewind,
breakpoints: {
768: {
perView: carouselMobileView
perView: carouselMobileView,
gap: calculateGap(carouselMobileView)
},
1024: {
perView: carouselTabletView
perView: carouselTabletView,
gap: calculateGap(carouselTabletView)
},
1440: {
perView: carouselLaptopView
perView: carouselLaptopView,
gap: calculateGap(carouselLaptopView)
}
}
});
Expand Down
Loading