I've got a slider (Cycle2) which is filled with text. Every slide is positioned: absolute; because the slides need to be on top of each other. So position: relative; doesn't work here.
The length of the text in the first slide determines how high each slide is. So, if the text on the second slide is longer then the text on the first slide, the text on the second slide isn't showing completely. It's breaking of the text.
There is a visiblity:hidden; line from within the Cycle2 plugin, so I set it to 'visible'. This worked, but it doesn't change the height of each slide. So, the result is that longer text will start to overflow on the element beneath it (because of the position: absolute;). I don't want to use that absolute positioning, but it seems to be the only way.
Is there a way to let the text determine the height of each slide. And if not, is it possible for my slider to just take the height of the highest slide for all slides?
It's near impossible for me to get this to work in a JSFiddle. This is the html for each individual slide. It's build in a liquid environment, just so you know.
<div class="testimonial-slide">
<div class="testimonial-slide-header">
<div class="testimonial-slide-img">
{% if testimonial_voor_slider.klant_foto_logo.src contains '.png' %}
{% assign pngKlant = true %}
{% else %}
{% assign pngKlant = false %}
{% endif %}
{%- include 'includes/image/image',
imageSource: testimonial_voor_slider.klant_foto_logo,
imageLink: ,
imageAlt: image.alt,
imageClass: 'klant-logo-slide',
imageSizes: '$-12-100px|md-4-100%|lg-6-100%',
imageMode: 'fit',
imageBoxed: false,
imageLazyload: true,
imagePng: pngKlant,
-%}
</div>
<div class="testimonial-slide-titles">
<h3>{{testimonial_voor_slider.klant_naam}}</h3>
<h4>{{testimonial_voor_slider.klant_bedrijfsnaam}}</h4>
</div>
</div>
<p>{{testimonial_voor_slider.testimonial_tekst}}</p>
</div>
This is the code for the container around these slides:
{% assign slider_class = slider_class | plus: 1 %}
<div class="{% if testimonial_slider.kleurstelling == 'licht' %} testimonial-light {% else %} {% endif %} {{slider_class}} cycle-slideshow testimonial-slider-container" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-prev=".cycle-prev-{{slider_class}}" data-cycle-next=".cycle-next-{{slider_class}}" data-cycle-timeout="0">
<span class="buttons-wrapper">
<span class="cycle-prev cycle-prev-{{slider_class}}"> <i class="material-icons"> arrow_back </i></span>
<span class="cycle-next cycle-next-{{slider_class}}"> <i class="material-icons"> arrow_forward </i></span>
</span>
{% for testimonial_voor_slider in testimonial_slider.testimonial_toevoegen %}
{% include testimonial_voor_slider %}
{% endfor %}
</div>
There is some inline styling being applied by the Cycle2 js. If you want to see it in action:
https://projectfresh.mijnversewebsite.nl/#image-24491
Just cycle to the next slide and you see what happens.
I really hope you guys can help me out :)
