Jump to content
buster808

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.

Thanks

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

try this

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

 

  • Like 1

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.

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

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 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

  • Like 1
  • Thanks 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.

Guest
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...