UIKIT3 slider autoheight using repeater fields

[buster808]

Hi, I have uikit3 slider which I have used as a text slider but can't get the auto height to work dependant on the size of the content.

Anyone fixed this before or used an auto height slider that works with Proccesswire repeater fields.

Thanks

[3fingers]

Please post some code in here and let's see if we can help ?

[dragan]

try this

.uk-slider-items li {
	display: table;
}

 

[buster808]

Hi, Dragan, I tried the CSS but didn't work.

My template code 3 fingers is below.

Thanks for your help.

<?php

 

$feed= $pages->get("template=feedback");

 

$feedback .= '<div class=" uk-box-shadow-bottom uk-width-1-1@l uk-margin-medium-top uk-margin-medium-bottom">';

$feedback .= '<div class="uk-background-default uk-padding-large">';

$feedback .= '<h1 class="main-heading-size"><span class="car-door"></span>What People Say About Us</h1>';

 

$feedback .= "<div class='uk-slider-container uk-visible-toggle' tabindex='-1' uk-slider>";

$feedback .= "<ul class='uk-slider-items'>";

 

foreach($feed->feedback_repeat as $feedentry ) {

 

$feedback .= "<li class='uk-width-1-1 inner_feed'><a href=''></a>";

$feedback .= "<div class='uk-panel'>";

$feedback .= "<h2>{$feedentry->title}</h2>";

$feedback .= "<p>{$feedentry->feedback_body}</p>";

$feedback .= "</div>";

$feedback .= "</li>";

}

 

$feedback .= "</ul>";

 

// arrows

$feedback .= "<a class='uk-position-center-left uk-position-small' href='#' uk-icon='icon: chevron-left; ratio: 3' uk-slider-item='previous'></a>";

$feedback .= "<a class='uk-position-center-right uk-position-small ' href='#' uk-icon='icon: chevron-right; ratio: 3' uk-slider-item='next'></a>";

// dot nav

$feedback .= "<ul class='uk-slider-nav uk-dotnav uk-flex-center uk-margin'></ul>";

$feedback .= "</div>";

 

$feedback .= "</div>";

$feedback .= "</div>";

[3fingers]

On mobile right now, sorry. 

Take a look at this section of the docs. It looks like a possibile solution.

[grimezy]

I think there is a feature request for this at the moment.

https://github.com/uikit/uikit/issues/3812

[AndZyk]

Hello @buster808,

you seem to have empty links inside your slider without any purpose. Maybe you should remove them. ?

In my opinion it is good, that the slider doesn't have a adaptive height. Because then the slider navigation and content flow would be disrupted on every slider change.

You could always choose a different component for your quotes than a slider on mobile. Just create two components with the same content and hide/show them on different viewports with the visibility component. And don't worry about search engines, because this is not considered duplicate content as far as I know.

Regards, Andreas

[buster808]

Content jumping around is fine - If the first item is really short and there's an item that's really big it means there will be a huge blank space when a user arrives on the site which looks like an error.

It's really annoying as the UIKIT slider works fine with PW but for this one thing. I use for feedback just text. looks like I'll have to find another component.

[dragan]

On 5/20/2019 at 9:09 PM, buster808 said:

Hi, Dragan, I tried the CSS but didn't work.

I was using one of the demos from the UIKit site and didn't really change much, apart from inserting text instead of images, and the a.m. CSS bit.

On 5/16/2019 at 12:17 PM, buster808 said:

an auto height slider that works with Proccesswire repeater fields

PW doesn't care about any of your frontend code. It will render anything you want.

There's plenty of ready-made sliders that support auto-height, here are just two random examples:

https://owlcarousel2.github.io/OwlCarousel2/demos/autoheight.html

https://codepen.io/simonmshirley/pen/remoXb

[grimezy]

I had the exact same issue with huge blank spaces @buster808.

One thing you can do to avoid the huge white space is use the truncate method introduced in PW 3.0.101.  Ryan wrote a great blog post on how to use it: 

https://processwire.com/blog/posts/processwire-3.0.101-core-updates/

Hope this helps.

[gregory]

Try this @buster808

<div class='uk-slider-container uk-visible-toggle' tabindex='-1' uk-slider="ratio: 1280:900">

Ratio: size of your content.