Jump to content

UIKIT3 slider autoheight using repeater fields

Recommended Posts

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.


Share this post

Link to post
Share on other sites

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

My template code 3 fingers is below. I have an example at https://mfconservatorycleaning.co.uk/ (What people say about us) where the height is fixed.

Thanks for your help.

$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>";

Share this post

Link to post
Share on other sites

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

  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...