Is it possible to use --x-slide-distance
property values higher than e.g. 1 to hide slides with --x-slide-distance
value > 1 to hide/show a slide… or style it differently?
E.g. as condition or custom css?
best regards
Mirco
Is it possible to use --x-slide-distance
property values higher than e.g. 1 to hide slides with --x-slide-distance
value > 1 to hide/show a slide… or style it differently?
E.g. as condition or custom css?
best regards
Mirco
Thanks to ChatGPT I found a solution:
This one (in combination with the css below) sets the opacity of each slide that is further away than the next or previous slide to 0 (or a value defined at the css).
JS:
jQuery(document).ready(function () {
function checkSlideValue() {
$('.x-slide').each(function() {
var value = parseFloat(getComputedStyle(this).getPropertyValue('--x-slide-distance'));
// Check if the value is greater than 1
if (value > 1) {
$(this).addClass('hide-slide');
} else {
$(this).removeClass('hide-slide');
}
});
}
// Check the CSS variable periodically (adjust the interval as needed)
setInterval(checkSlideValue, 100);
});
});
Page CSS:
.hide-slide {
opacity: 0;
}
To use display: none;
is not a good idea, because it messes all up
Maybe no the most elegant way, but it works and maybe helps someone with a similar challenge.
best regards
Mirco
Hi Mirco,
Glad that you are able to find the solution and share it.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.