Responsive slider
Thumbnail

PugSCSSPHP
.uk-margin-top#frontPageSliderAuthor(uk-slider="") .uk-position-relative .uk-slider-container ul.uk-slider-items.uk-grid-small(class='uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l' uk-grid) each i in frontPage each j in i.author each k in j.list li a.uk-background-muted.uk-padding-default.uk-position-relative.uk-display-block(href=k.href) img.uk-position-top-center(src=k.icon style='transform: translateX(-50%) scale(1.5,1.8)') p.uk-text-center.uk-margin-medium-top.uk-margin-bottom.text-default.uk-text-primary.text-large-weight.text-small-spacing=k.text p.uk-text-center.uk-margin-bottom.text-dark.text-xxlarge.text-large-weight.text-small-spacing=k.title p.uk-text-center.uk-margin-bottom.text-small.text-large-weight.text-small-spacing(style='color:#606060')=k.desc p.uk-text-center.uk-margin-bottom span.uk-background-cover.uk-display-block.uk-margin-auto(data-src=k.src uk-img style='width:107px;height:107px;border-radius:100%;') div(class="uk-hidden@l") a.uk-position-center-left(href="#" uk-slidenav-previous="" uk-slider-item="previous") a.uk-position-center-right(href="#" uk-slidenav-next="" uk-slider-item="next") div(class="uk-visible@l") a.uk-position-center-left-out.uk-position-small(href="#" uk-slidenav-previous="" uk-slider-item="previous" style='right: 101%;') a.uk-position-center-right-out.uk-position-small(href="#" uk-slidenav-next="" uk-slider-item="next")
#frontPageSliderAuthor { .uk-slider-container { @include mq-l { margin-left: 40px; margin-right: 40px; } } } #frontPageSliderAuthor { .uk-slidenav:before { display:none } .uk-slidenav svg { color: #ffe400; transform: scale(1.5) } .uk-slidenav svg polyline { stroke-width: 2px; } .uk-slidenav svg:hover { color: #222; } }
<div class="uk-margin-top" id="frontPageSliderAuthor" uk-slider=""> <div class="uk-position-relative"> <div class="uk-slider-container"> <ul class="uk-slider-items uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid> <?php $users = get_users( array( 'role__in' => array('author'), 'number' => 12 ) ); foreach ( $users as $user ): ?> <li><a class="uk-background-muted uk-padding-default uk-position-relative uk-display-block" href="<?php echo esc_url(home_url().'/author/'.$user->user_login); ?>"><img class="uk-position-top-center" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-hot_news.svg" style="transform: translateX(-50%) scale(1.5,1.8)"> <p class="uk-text-center uk-margin-medium-top uk-margin-bottom text-default uk-text-primary text-large-weight text-small-spacing"><?php echo get_field('author_job','user_'.$user->ID); ?></p> <p class="uk-text-center uk-margin-bottom text-dark text-xxlarge text-large-weight text-small-spacing"><?php echo esc_html($user->display_name); ?></p> <p class="uk-text-center uk-margin-bottom text-small text-large-weight text-small-spacing" style="color:#606060"><?php echo esc_html(get_user_meta($user->ID,'description',true)); ?></p> <p class="uk-text-center uk-margin-bottom"><span class="uk-background-cover uk-display-block uk-margin-auto" data-src="<?php echo (get_field('author_avatar','user_'.$user->ID))?get_field('author_avatar','user_'.$user->ID)['url']:get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:107px;height:107px;border-radius:100%;"></span></p></a></li> <?php endforeach; ?> </ul> </div> <div class="uk-hidden@l"><a class="uk-position-center-left" href="#" uk-slidenav-previous="" uk-slider-item="previous"></a><a class="uk-position-center-right" href="#" uk-slidenav-next="" uk-slider-item="next"></a></div> <div class="uk-visible@l"><a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous="" uk-slider-item="previous" style="right: 101%;"></a><a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next="" uk-slider-item="next"></a></div> </div> </div>