[bug fix]header slide
This commit is contained in:
zzossig
parent
6ec7dcd884
commit
707ebc4cb4
|
|
@ -13,4 +13,5 @@ series:
|
|||
-
|
||||
categories:
|
||||
-
|
||||
image:
|
||||
---
|
||||
|
|
|
|||
|
|
@ -42,6 +42,9 @@
|
|||
|
||||
@include no-select;
|
||||
@include translateX(-50%);
|
||||
@include themify($themes) {
|
||||
color: themed('gtt-color');
|
||||
}
|
||||
|
||||
&--text {
|
||||
text-align: center;
|
||||
|
|
@ -66,6 +69,9 @@
|
|||
background: transparent;
|
||||
|
||||
@include no-select;
|
||||
@include themify($themes) {
|
||||
color: themed('gtt-color');
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
|
|
|
|||
|
|
@ -1,34 +1,14 @@
|
|||
.swiper-container {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
@include themify($themes) {
|
||||
background: themed('navbar-title-active-color') !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swipe {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swipe-wrap {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swipe-wrap > div {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
|
@ -38,4 +18,4 @@
|
|||
@include flexbox();
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
.header {
|
||||
@include flexbox();
|
||||
@include justify-content(center);
|
||||
@include align-items(center);
|
||||
@include flex-direction(column);
|
||||
|
||||
.title {
|
||||
font-family: $title-font;
|
||||
font-weight: 900;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,6 @@
|
|||
{{ define "title" }}{{ .Site.Title }}{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
||||
<main class="main inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
|
||||
<div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq ($.Param "sidebarPosition") "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
|
||||
<div class="summary__container" data-display="block">
|
||||
|
|
|
|||
|
|
@ -2,66 +2,64 @@
|
|||
<script defer src="{{ $swipe.RelPermalink }}"></script>
|
||||
|
||||
{{ if $.Params.header }}
|
||||
<div id="headerSwipe" class="swipe">
|
||||
<div class="swipe-wrap">
|
||||
{{ range $.Params.header }}
|
||||
{{ if eq .type "slide" }}
|
||||
{{ $height := .height }}
|
||||
{{ range .slide }}
|
||||
<div class="swiper-slide site-header site-header__align-{{ .align }}" style="background-image: url('{{ .imageSrc | relURL }}'); background-size: {{ .imageSize }}; background-repeat: {{ .imageRepeat }}; background-position: {{ .imagePosition }}; height: {{ $height }}px;">
|
||||
{{ $header := . }}
|
||||
{{ if .title }}
|
||||
{{ range .title }}
|
||||
<div class="site-header__title" style="font-size: {{ $header.titleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .spaceBetweenTitleSubtitle }}
|
||||
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
|
||||
{{ end }}
|
||||
{{ if .subtitle }}
|
||||
{{ range .subtitle }}
|
||||
<div class="site-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
<div id="headerSwipe" class="swipe">
|
||||
<div class="swipe-wrap">
|
||||
{{ range $.Params.header }}
|
||||
{{ if eq .type "slide" }}
|
||||
{{ $height := .height }}
|
||||
{{ range .slide }}
|
||||
<div class="site-header site-header__align-{{ .align }}" style="background-image: url('{{ .imageSrc | relURL }}'); background-size: {{ .imageSize }}; background-repeat: {{ .imageRepeat }}; background-position: {{ .imagePosition }}; height: {{ $height }}px;">
|
||||
{{ $header := . }}
|
||||
{{ if .title }}
|
||||
{{ range .title }}
|
||||
<div class="site-header__title" style="font-size: {{ $header.titleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if .spaceBetweenTitleSubtitle }}
|
||||
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
|
||||
{{ end }}
|
||||
{{ if .subtitle }}
|
||||
{{ range .subtitle }}
|
||||
<div class="site-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px; padding: {{ $header.paddingY }}px {{ $header.paddingX }}px;">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
{{ $header := .Params.header }}
|
||||
var options = null;
|
||||
var header = JSON.parse({{ $header | jsonify }});
|
||||
var slide = header.filter(function(h) {
|
||||
return h.type === 'slide';
|
||||
});
|
||||
|
||||
if (slide.length > 0) {
|
||||
options = slide[0].options;
|
||||
}
|
||||
console.log(options);
|
||||
var headerSwipeElem = document.getElementById('headerSwipe');
|
||||
var headerSwipe = Swipe(headerSwipeElem,
|
||||
options ?
|
||||
options : {
|
||||
startSlide: 0,
|
||||
auto: 7000,
|
||||
draggable: true,
|
||||
autoRestart: true,
|
||||
continuous: true,
|
||||
disableScroll: true,
|
||||
stopPropagation: true,
|
||||
callback: function (index, element) { },
|
||||
transitionEnd: function (index, element) { }
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
{{ $header := $.Params.header }}
|
||||
var options = null;
|
||||
var header = JSON.parse({{ $header | jsonify }});
|
||||
var slide = header.filter(function(h) {
|
||||
return h.type === 'slide';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
if (slide.length > 0) {
|
||||
options = slide[0].options;
|
||||
}
|
||||
|
||||
var headerSwipeElem = document.getElementById('headerSwipe');
|
||||
var headerSwipe = new Swipe(headerSwipeElem,
|
||||
options ?
|
||||
options : {
|
||||
startSlide: 0,
|
||||
auto: 7000,
|
||||
draggable: true,
|
||||
autoRestart: true,
|
||||
continuous: true,
|
||||
disableScroll: true,
|
||||
stopPropagation: true,
|
||||
callback: function (index, element) { },
|
||||
transitionEnd: function (index, element) { }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
{{ if $.Params.header }}
|
||||
{{ range $.Params.header }}
|
||||
{{ if eq .type "text" }}
|
||||
<div class="site-header site-header__align-{{ .align }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
|
||||
{{ $header := . }}
|
||||
{{ if .title }}
|
||||
{{ range .title }}
|
||||
<div class="site-header__title {{ if $header.titleShadow }}site-header__title--shadow{{ end }}" style="font-size: {{ $header.titleFontSize }}px; {{ with $header.titleColor }}color:{{ . }}{{ end }};">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .spaceBetweenTitleSubtitle }}
|
||||
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
|
||||
{{ end }}
|
||||
{{ if .subtitle }}
|
||||
{{ range .subtitle }}
|
||||
<div class="site-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px; {{ with $header.subtitleColor }}color:{{ . }}{{ end }}" data-cursive="{{ with $header.subtitleCursive }}{{ . }}{{ end }}">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="site-header site-header__align-{{ .align }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
|
||||
{{ $header := . }}
|
||||
{{ if .title }}
|
||||
{{ range .title }}
|
||||
<div class="site-header__title {{ if $header.titleShadow }}site-header__title--shadow{{ end }}" style="font-size: {{ $header.titleFontSize }}px; {{ with $header.titleColor }}color:{{ . }}{{ end }};">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .spaceBetweenTitleSubtitle }}
|
||||
<div style="height: {{ .spaceBetweenTitleSubtitle }}px"></div>
|
||||
{{ end }}
|
||||
{{ if .subtitle }}
|
||||
{{ range .subtitle }}
|
||||
<div class="site-header__subtitle" style="font-size: {{ $header.subtitleFontSize }}px; {{ with $header.subtitleColor }}color:{{ . }}{{ end }}" data-cursive="{{ with $header.subtitleCursive }}{{ . }}{{ end }}">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
Loading…
Reference in New Issue