<main>
  <div class="slideshow twic-view">
    <div class="slider">
      <img class="twic" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-snow.jpg" data-src-transform="cover/step=10/max=640">
    </div>
    <div class="slider">
      <img class="twic" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-cafe.jpg" data-src-transform="cover/step=10/max=640">
    </div>
    <div class="slider">
      <img class="twic" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-castle.jpg" data-src-transform="cover/step=10/max=640">
    </div>
    <div class="slider">
      <img class="twic" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-cereals.jpg" data-src-transform="cover/step=10/max=640">
    </div>
    <div class="slider">
      <img class="twic" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-doggy.jpg" data-src-transform="cover/step=10/max=640">
    </div>
    <div class="slider">
      <img class="twic" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/574595/tp-lake.jpg" data-src-transform="cover/step=10/max=640">
    </div>
  </div>
</main>
@import "breakpoint";

$breakpoint-from-tablet: 768px;
$breakpoint-from-desktop-sml: 769px;
$breakpoint-from-desktop-mid: 1200px;
$breakpoint-from-desktop-lrg: 1600px;

html {
  box-sizing: border-box;
  width:100%; 
  height:100%; 
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #2C3E50;
  background: -webkit-linear-gradient(to right, #4CA1AF, #2C3E50);
  background: linear-gradient(to right, #4CA1AF, #2C3E50);
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  
  @include breakpoint($breakpoint-from-tablet) {
    width: 70%;
  }
  
  @include breakpoint($breakpoint-from-desktop-mid) {
    width: 50%;
  }
}

.slideshow {
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  background-color: black;
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1s;
  
  &.slideshow--ready {
    visibility: visible;
    opacity: 1;
  }
}

.slider {
  position: relative;
  
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (1 / 1) * 100%;
    
    @include breakpoint($breakpoint-from-tablet) {
      padding-top: (3 / 4) * 100%;
    }

    @include breakpoint($breakpoint-from-desktop-mid) {
      padding-top: (9 / 16) * 100%;
    }
  }
  
  > img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
$(document).ready(function(){
  $('.slideshow').slick({
    dots: true
  });
});

$('.slideshow').on('init', function() {
  $(this).addClass('slideshow--ready');
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  3. https://i.twic.pics/v1/script