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

[mircotripoczky]

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

[mircotripoczky]

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

[tristup]

Hi Mirco,

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

Thanks