Modern slider height + conditional logic based on number of looped items

Support
#1

Hi,

I’m setting up a Layout page where I’d like to use a slider. The layout is for concerts, and the slider will display the artists associated with that concert. The artists are connected to the concert through an ACF Relationship field called “konsert-artist”, and I have successfully been able to loop the artists to create the slider. I have based the design on the template “Post Carousel Slider”. My problem is that whenever I have less than 3 slides, each slide gets very big (both wider and taller). Is there a way to set it up so that the slide size is consistent no matter how many slides there are? Whenever I have tried setting “max-height” on the slide or slider, the parent element adjusts, but not the slide itself.

I was also wondering if there is a way to hide the Slide Navigation based on how many slides I have. The easy solution would be to set a conditional based on the number of slides, but I am struggling to find a way to output the number of slides (ie number of objects found in {{dc:acf:post_field field=“konsert-artist”}}. Is there a way for me to get that number? Problem being that I can’t count the number of looped items since the Slide Navigation sits are outside of the looper consumer.

Hope that was cohesive. Thanks for any help!

Best regards,
Andreas Rokseth

#2

Hello Andreas,

Thanks for writing in!

1.) You can set a maximum width for your Slide element so that when there are only a few slides, it will not becomes wide as well as the image that you have inserted in it.

Screen Shot 2022-06-05 at 5.18.40 AM
Screen Shot 2022-06-05 at 5.18.40 AM638×1022 44 KB

2.) In your Slide Navigation element, you can actually insert a “Number” condition and use the Looper Total Item Count as you condition.

Screen Shot 2022-06-05 at 5.23.36 AM
Screen Shot 2022-06-05 at 5.23.36 AM2400×1234 144 KB

Screen Shot 2022-06-05 at 5.22.14 AM
Screen Shot 2022-06-05 at 5.22.14 AM1090×376 22.2 KB

Screen Shot 2022-06-05 at 5.22.31 AM
Screen Shot 2022-06-05 at 5.22.31 AM1102×382 28.9 KB

Kindly let us know how it goes.

#3

Hi!

Thank you very much, that solved it! I wasn’t aware that the Looper Total Item Count would work outside of a looper consumer, which indeed it did:-) The max-width also worked like a charm!

All the best,
Andreas

#4

Glad to hear that, Andreas.

#5

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