Skip to content
Snippets Groups Projects
Commit 450c5011 authored by Štěpán Farka's avatar Štěpán Farka
Browse files

[WIP] slider

parent a5124932
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Source diff could not be displayed: it is too large. Options to address this: view the blob.
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
"styleguidekit-mustache-default": "^3.0.0", "styleguidekit-mustache-default": "^3.0.0",
"tailwindcss-elevation": "^0.3.4", "tailwindcss-elevation": "^0.3.4",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-slick-carousel": "^1.0.6",
"vue2-flip-countdown": "^0.10.0" "vue2-flip-countdown": "^0.10.0"
}, },
"devDependencies": { "devDependencies": {
......
{{> organisms-header }} {{> 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-twitter-section }}
{{> organisms-articles-section }} {{> organisms-articles-section }}
<div class="container--wide mx-auto px-4 mb-32"> <div class="container--wide mx-auto px-4 mb-32">
......
...@@ -145,14 +145,19 @@ ...@@ -145,14 +145,19 @@
@apply text-xl font-bold leading-7 uppercase; @apply text-xl font-bold leading-7 uppercase;
} }
.head-2xl {
@apply text-2xl font-bold leading-8 uppercase
}
.head-4xl { .head-4xl {
@apply text-4xl font-bold leading-10 uppercase mb-5; @apply text-4xl font-bold leading-10 uppercase mb-5;
} }
.head-2xl { .head-8xl {
@apply text-2xl font-bold leading-8 uppercase @apply text-7xl font-bold uppercase;
} }
p { p {
@apply leading-6; @apply leading-6;
} }
...@@ -161,3 +166,78 @@ p { ...@@ -161,3 +166,78 @@ p {
.vertical-time-line { .vertical-time-line {
border-left: 1px solid green; 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;
}
}
}
}
...@@ -39,6 +39,8 @@ ...@@ -39,6 +39,8 @@
*/ */
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
@import 'vue-slick-carousel/dist/vue-slick-carousel.css';
::-moz-selection { ::-moz-selection {
color: theme("colors.white"); color: theme("colors.white");
background: theme("colors.cyan.300"); background: theme("colors.cyan.300");
......
<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>
...@@ -2,6 +2,7 @@ import Vue from "vue"; ...@@ -2,6 +2,7 @@ import Vue from "vue";
import { forEachNode } from "./utils"; import { forEachNode } from "./utils";
import HeaderCarousel from "./components/header/HeaderCarousel";
import Renderer from "./components/calendar/Renderer"; import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider"; import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider"; import GoogleProvider from "./components/calendar/GoogleProvider";
...@@ -12,6 +13,7 @@ import FooterCollapsible from "./components/footer/FooterCollapsible"; ...@@ -12,6 +13,7 @@ import FooterCollapsible from "./components/footer/FooterCollapsible";
import FlipClock from "./components/FlipClock"; import FlipClock from "./components/FlipClock";
Vue.component("ui-header-carousel", HeaderCarousel);
Vue.component("ui-calendar-renderer", Renderer); Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider); Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-calendar-google-provider", GoogleProvider); Vue.component("ui-calendar-google-provider", GoogleProvider);
......
module.exports = { module.exports = {
content: [ content: [
"./public/**/*.html" "./public/**/*.html",
"./source/**/*.vue"
], ],
theme: { theme: {
extend: { extend: {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment