Card Radio Inside nestable slider

Bug Reports
#1

Hello,
With this structure, there are a few issues with the slider. 1. I can’t seem to control how many slides are in the view, 2. I cannot select the Card Radio.

image

The data is rendering on the front end, but I am unable to make a selection and the slider does not seem to behave properly.

If I change the query loop to the Card Radio, the slider no longer works.

Is it possible to put a Card Radio inside a query loop that is inside a slider?

Thanks,

John

#3

Hmmm… I never tried to add form fields inside a slider. Just thinking about it, I can already see some problems :smiley: I’ll check that soon.

#4

It works if the slider is set to “slide”. Setting it to “loop”, makes splide create clones of the slides which then causes duplicate IDs of the inputs n stuff which I guess messes with the selection of the inputs.

Alternative small-ish workaround that gives us more control over the markup and structure:

For the slider, just two three things to do:

  1. Add a class to the slide component
  2. Add an attribute to the slide component, pulling in whatever data you’d like to submit later
    image
  3. In the slide component, add some css for the selected styles, using a class (in this case active) which we’ll deal with in a bit
    image

Now outside of the slider, but inside the form, add a hidden field or any kinda of input you’d like to use. Give this field a class as well.

Lastly, we create an event in the Bricksforge Panel like so:

image
image1887×854 46.1 KB

When clicking on a slide, we remove the active class from all slides while re-adding it to the clicked slide. Lastly we take the value of it’s data attribute and pass it into our hidden field with this lil snippet:

const hiddenField = document.querySelector('.your-hidden-field-class input');
const slideData = trigger.dataset.date;
hiddenField.value = slideData

Not sure if there is a more elegant / less involved way to go about it but the markup is definitely a lot leaner than when we nest a bunch of radio wrappers with radio cards in the slider.