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>