<div class="head">
    <h1>Youplay Carousel</h1>
    <h2><a href="https://themeforest.net/item/youplay-gaming-wordpress-theme/11959042?ref=_nK" target="_blank">See Theme Here</a></h2>
</div>

<!-- START: carousel -->
<div class="youplay-carousel owl-carousel">
    <a class="angled-img" href="#">
        <div class="img">
            <img src="https://html.nkdev.info/youplay/dark/assets/images/game-bloodborne-500x375.jpg" alt="">
        </div>
    </a>
    <a class="angled-img" href="#">
        <div class="img">
            <img src="https://html.nkdev.info/youplay/dark/assets/images/game-dark-souls-ii-500x375.jpg" alt="">
        </div>
    </a>
    <a class="angled-img" href="#">
        <div class="img">
            <img src="https://html.nkdev.info/youplay/dark/assets/images/game-soul-sacrifice-500x375.jpg" alt="">
        </div>
    </a>
    <a class="angled-img" href="#">
        <div class="img">
            <img src="https://html.nkdev.info/youplay/dark/assets/images/game-kingdoms-of-amalur-reckoning-500x375.jpg" alt="">
        </div>
    </a>
    <a class="angled-img" href="#">
        <div class="img">
            <img src="https://html.nkdev.info/youplay/dark/assets/images/game-the-witcher-500x375.jpg" alt="">
        </div>
    </a>
    <a class="angled-img" href="#">
        <div class="img">
            <img src="https://html.nkdev.info/youplay/dark/assets/images/game-diablo-iii-500x375.jpg" alt="">
        </div>
    </a>
</div>
<!-- END: carousel -->

/* Variables */
$back_color: #131313;
$images_opacity: 0.6;
$images_hover_opacity: 0.9;
$skew_size: 8deg;

/* Body Styles */
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
body {
  background-color: $back_color;
  font: 14px/1.42857143 'Lato', sans-serif;
  color: #fff;
  text-align: center;
  margin: 0;
  letter-spacing: 0.06em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.head {
  margin-top: 70px;
  margin-bottom: 70px;
  
  h1 {
      font-size: 35px;
      text-transform: uppercase;
  }
  h2 {
      font-weight: normal;
  }
  a {
      color: #D92B4C;
      text-decoration: none;

      &:hover {
          text-decoration: underline;
      }
  }
}

/* Angled Images */
.angled-img {
    position: relative;
    display: block;
    shape-outside: polygon(9% 0, 0 100%, 91% 100%, 100% 0%);

    &,
    &:hover,
    &:focus {
        color: inherit;
        text-decoration: none;
        outline: none;
    }

    // image
    .img {
        position: relative;
        overflow: hidden;
        transform: skew(-$skew_size);
        transform-origin: 50% 50%;
        background: $back_color;
        -webkit-backface-visibility: hidden;

        > img {
            width: 100%;
            transform: skew($skew_size) scale(1.15);
            transition: .3s opacity ease;
            -webkit-backface-visibility: hidden;
            opacity: $images_opacity;
        }
    }
    &:hover .img > img {
        opacity: $images_hover_opacity;
    }
}

/* Carousel */
.youplay-carousel {
    // remove space between items
    .angled-img {
        margin-left: -1px;
    }

    // controls
    .owl-nav {
        margin: 0;

        .owl-prev,
        .owl-next {
            position: absolute;
            cursor: pointer;
            font-size: 2rem;
            top: 0;
            height: 100%;
            width: 70px;
            transition: .3s opacity ease;
            opacity: 1;
            margin: 0;
            padding: 0;

            &:hover {
                opacity: 0.8;
            }
        }
        .owl-prev,
        .owl-prev:hover {
            left: 0;
            background: linear-gradient(to right, $back_color, rgba($back_color, 0));
        }
        .owl-next,
        .owl-next:hover {
            // no use 0px - added 1px transparent gap
            right: -0.1px;
            background: linear-gradient(to left, $back_color, rgba($back_color, 0));
        }
    }
}

$('.youplay-carousel').owlCarousel({
    loop:true,
    stagePadding: 70,
    nav:true,
    dots: false,
    navText: ['', ''],
    responsive:{
        0:{
            items:1
        },
        500:{
            items:2
        },
        992:{
            items:3
        },
        1200:{
            items:4
        }
    }
});