Slick Carousel alt-2

index.pug

doctype html

// images
- var image=['https://images.unsplash.com/photo-1468549940493-46152524296c?auto=format&fit=crop&w=952&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1473042904451-00171c69419d?auto=format&fit=crop&w=1075&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1505168125601-4ddfdea4c7e7?auto=format&fit=crop&w=1051&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images.unsplash.com/photo-1466854076813-4aa9ac0fc347?auto=format&fit=crop&w=1489&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D', 'https://images-na.ssl-images-amazon.com/images/M/MV5BMjNlMzNjMTMtNDAxYi00M2QxLTlmYWQtMTdkZDljMmIzYjI5XkEyXkFqcGdeQXVyMzM4NjcxOTc@._V1_SY1000_CR0,0,685,1000_AL_.jpg'];

// tooltip
- var tooltip='<span class="uk-text-lead uk-text-small uk-light">Lorem ipsum dolor sit amet</span><br><span class="uk-text-muted">Lorem ipsum</span><br><br><span class="uk-text-meta uk-text-small uk-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta purus sit amet tellus varius.</span>'

- var text='Lorem ipsum dolor sit'

.uk-section.uk-section-secondary
  .uk-container.uk-container-large
    #carousel.slick-carousel
      each val in image
        each val in image
          div
            .uk-card.uk-card-secondary.uk-card-small.uk-card-hover(style="margin: 10px; margin-right: 20px;" title=tooltip uk-tooltip="pos: right; delay: 100")
              a(href="#" title=text)
                .uk-card-media-top.uk-cover-container
                  img(src=val alt=text uk-cover)
                  canvas(width="171.25" height="250")
              .icons-meta.uk-text-meta.uk-text-truncate
                each val in [1,2,3]
                  span(uk-icon="icon: comments")
                span=text
              .uk-card-body
                .uk-card-badge.uk-label(title=text)
                  a(href="#").uk-link-text 9.9
                .uk-text-lead.uk-text-small.uk-text-capitalize.uk-text-truncate.uk-text-bold.uk-light
                  a(href="#" title=text)=text
                .uk-text-meta.uk-text-small.uk-text-capitalize.uk-text-break
                  a(href="#" title="Lorem").uk-text-muted Lorem
                  span= " / "
                  a(href="#" title="Ipsum").uk-text-muted ipsum
                  span= " / "
                  a(href="#" title="Dolor").uk-text-muted dolor
                  span= " / "
                  a(href="#" title="Sit").uk-text-muted sit
                  span= " / "
                  a(href="#" title="Amet").uk-text-muted amet

script.js

$(document).ready(function() {
  $(".slick-carousel").slick({
    autoplay: true,
    centerMode: false,
    draggable: true,
    swipe: true,
    swipeToSlide: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 500,
    autoplaySpeed: 5000,
    adaptiveHeight: false,
    mobileFirst: true,
    arrows: false,
    dots: false,
    focusOnSelect: false,
    infinite: true,
    lazyLoad: 'progressive',
    //prevArrow: '<a href="" class="uk-slidenav-large" uk-slidenav-previous></a>',
    //nextArrow: '<a href="" class="uk-slidenav-large" uk-slidenav-next></a>',
    responsive: [
      {
        breakpoint: 1280,
        settings: {
          draggable: false,
          arrows: true,
          swipe: false,
          slidesToShow: 6,
          slidesToScroll: 6
        }
      },
      {
        breakpoint: 992,
        settings: {
          draggable: false,
          arrows: true,
          swipe: false,
          slidesToShow: 4,
          slidesToScroll: 4
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4
        }
      },
      {
        breakpoint: 320,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }
    ]
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

slick-carousel-alt-2.markdown

Slick Carousel alt-2

A Pen by Beibit Sakhanov on CodePen.

License.

style.sass

#carousel
  .slick-slide
    outline: unset
    .uk-card
      max-width: 171.25px
      &.uk-card-secondary
        background-color: (#222 + 5)
      .icons-meta
        position: relative
        margin-bottom: 0
        bottom: 30px
        width: calc(100% - 10px)
        padding: 5px
        background-color: rgba(0,0,0,.7)
        color: (#222 + 150)
        span
          margin-right: 5px
      .uk-card-body
        margin-top: -30px
        .uk-card-badge
          top: 10px
          right: 10px
          background-color: #ffaa00
          color: #fff
          .uk-link-text
            &:hover
              color: inherit

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.31/css/uikit.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />