Using "--x-slide-distance" value to hide/show slides?

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

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).


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) {
          } else {
      // 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 :slight_smile:

Maybe no the most elegant way, but it works and maybe helps someone with a similar challenge.

best regards

Hi Mirco,

Glad that you are able to find the solution and share it.


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.