Jump to content

UIKIT3 slider autoheight using repeater fields


buster808
 Share

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

Link to comment
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>";
Link to comment
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
Link to comment
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.

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

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...