[WIP] slider

main/styleguide/package.json

@@ -35,6 +35,7 @@
     "styleguidekit-mustache-default": "^3.0.0",
     "tailwindcss-elevation": "^0.3.4",
     "vue": "^2.6.11",
+    "vue-slick-carousel": "^1.0.6",
     "vue2-flip-countdown": "^0.10.0"
   },
   "devDependencies": {

main/styleguide/source/_patterns/templates/homepage.mustache

 {{> organisms-header }}
 
-<main class="pt-32" role="main">
+<main role="main">
+  <div class="__js-root">
+    <ui-header-carousel></ui-header-carousel>
+  </div>
   {{> organisms-twitter-section }}
   {{> organisms-articles-section }}
   <div class="container--wide mx-auto px-4 mb-32">

main/styleguide/source/css/atoms/heading.pcss

@@ -145,14 +145,19 @@
   @apply text-xl font-bold leading-7 uppercase;
 }
 
+.head-2xl {
+  @apply text-2xl font-bold leading-8 uppercase
+}
+
 .head-4xl {
   @apply text-4xl font-bold leading-10 uppercase mb-5;
 }
 
-.head-2xl {
-  @apply text-2xl font-bold leading-8 uppercase
+.head-8xl {
+  @apply text-7xl font-bold uppercase;
 }
 
+
 p {
   @apply leading-6;
 }
@@ -161,3 +166,78 @@ p {
 .vertical-time-line {
   border-left: 1px solid green;
 }
+
+.header-carousel {
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  .slick-slide {
+    overflow: hidden;
+    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
+  }
+  img {
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    transition: all 500ms ease-in-out;
+    transform: scale(1.25, 1.25);
+  }
+  .slick-active {
+    img {
+      transform: scale(1, 1);
+    }
+  }
+
+  .slick-arrow {
+    position: absolute;
+    color: white;
+    top: 70%;
+    z-index: 10;
+    font-size: 0;
+
+    &:before, &:after {
+      border-right: 2px solid;
+      content: '';
+      display: block;
+      height: 8px;
+      margin-top: -6px;
+      position: absolute;
+      transform: rotate(135deg);
+      right: 10px;
+      top: 50%;
+      width: 0;
+    }
+
+    &.slick-next {
+      right: 3%;
+    }
+    &.slick-prev {
+      right: 8%;
+    }
+  }
+  .slick-dots {
+    position: absolute;
+    left: 5%;
+    color: white;
+    top: 70%;
+    z-index: 10;
+
+    li {
+      height: 6px;
+      width: 6px;
+      margin-bottom: 6px;
+      border: 1px solid white;
+      border-radius: 50%;
+
+      &.slick-active {
+        background-color: white;
+      }
+
+      button {
+        font-size: 0;
+      }
+    }
+  }
+}

main/styleguide/source/css/style.pcss

@@ -39,6 +39,8 @@
 */
 @import "tailwindcss/utilities";
 
+@import 'vue-slick-carousel/dist/vue-slick-carousel.css';
+
 ::-moz-selection {
   color: theme("colors.white");
   background: theme("colors.cyan.300");

main/styleguide/source/js/components/header/HeaderCarousel.vue

+<template>
+  <div class="header-carousel">
+    <vue-slick-carousel v-bind="settings">
+      <div class="xl:h-screen">
+        <img src="https://unsplash.it/792/387?image=4" draggable="false">
+      </div>
+      <div class="xl:h-screen">
+        <img src="https://unsplash.it/792/387?image=1" draggable="false">
+      </div>
+      <div class="xl:h-screen">
+        <img src="https://unsplash.it/792/387?image=2" draggable="false">
+      </div>
+<!--      <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">-->
+<!--        <div class="container">-->
+<!--          <h1 class="head-8xl">72% domácností bylo</h1>-->
+<!--          <h1 class="head-8xl">násilně digitalizováno</h1>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">-->
+<!--        <div class="container">-->
+<!--          <h1 class="head-8xl">72% domácností bylo</h1>-->
+<!--          <h1 class="head-8xl">násilně digitalizováno</h1>-->
+<!--        </div>-->
+<!--      </div>-->
+    </vue-slick-carousel>
+  </div>
+</template>
+
+<script>
+import VueSlickCarousel from 'vue-slick-carousel'
+
+export default {
+  components: { VueSlickCarousel },
+  name: 'HeaderCarousel',
+  created() {
+    console.log('test')
+  },
+  data: () => ({
+    settings: {
+      "fade": true,
+      "dots": true,
+    }
+  })
+}
+</script>

main/styleguide/source/js/main.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 
 import { forEachNode } from "./utils";
 
+import HeaderCarousel from "./components/header/HeaderCarousel";
 import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
 import GoogleProvider from "./components/calendar/GoogleProvider";
@@ -12,6 +13,7 @@ import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 
 
+Vue.component("ui-header-carousel", HeaderCarousel);
 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);
 Vue.component("ui-calendar-google-provider", GoogleProvider);

main/styleguide/tailwind.config.js

 module.exports = {
     content: [
-        "./public/**/*.html"
+        "./public/**/*.html",
+        "./source/**/*.vue"
     ],
     theme: {
         extend: {