diff --git a/bin/Controls/Children/Slider.js b/bin/Controls/Children/Slider.js
index d2c73b0e7e3b51c92f2b7f32e18b0f1a1d5d0fe7..a2a23cc1f40d558df7d41ac04346971134f07fb9 100644
--- a/bin/Controls/Children/Slider.js
+++ b/bin/Controls/Children/Slider.js
@@ -76,7 +76,13 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
this.getElm().removeClass('quiqqer-bricks-children-slider-mobile');
}
- this.$scrollLength = (size.x / 1.2).round();
+ var Entry = SliderContainer.getElement('.quiqqer-bricks-children-slider-child'),
+ scrollLen = (size.x / 1.2).round();
+ if (Entry) {
+ scrollLen = Entry.getSize().x;
+ }
+
+ this.$scrollLength = scrollLen;
this.$scrollMax = this.$Inner.getScrollSize().x - size.x;
this.$icons.setStyle('line-height', size.y);
this.$onScroll();
@@ -123,7 +129,10 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
'.quiqqer-bricks-children-slider-container-inner'
);
- this.$SlideFX = new Fx.Scroll(this.$Inner);
+ this.$SlideFX = new Fx.Scroll(this.$Inner, {
+ duration: 200
+ });
+
this.$icons = Elm.getElements('article a .quiqqer-icon');
var scrollSpy = QUIFunctionUtils.debounce(this.$onScroll, 200);
diff --git a/bricks.xml b/bricks.xml
index 288ffbe77f9ae706428aa9f5c6ae89af7ddee512..74061c0b193138f1f0264ad9dc0ad2aa74df63c0 100644
--- a/bricks.xml
+++ b/bricks.xml
@@ -129,20 +129,20 @@
</setting>
<setting name="template" type="select">
- <locale group="quiqqer/bricks" var="brick.control.setting.template"/>
+ <locale group="quiqqer/bricks" var="brick.control.slider.template"/>
<option value="onlyImage" selected="selected">
<locale group="quiqqer/bricks"
- var="brick.control.setting.template.onlyImages"/>
+ var="brick.control.slider.template.onlyImages"/>
</option>
<option value="imageAndText" selected="selected">
<locale group="quiqqer/bricks"
- var="brick.control.setting.template.imageAndText"/>
+ var="brick.control.slider.template.imageAndText"/>
</option>
</setting>
<setting name="slideHeight" type="number" min="1">
- <locale group="quiqqer/bricks" var="brick.control.setting.slideHeight"/>
+ <locale group="quiqqer/bricks" var="brick.control.slider.template.slideHeight"/>
</setting>
<setting name="limit" type="number" min="1">
diff --git a/locale.xml b/locale.xml
index 55aeb8f0d8dbe717ac33df92d9ae8e30c6af4f4e..d22ba7181151ba65c9a144313d13cc3459ca2ead 100644
--- a/locale.xml
+++ b/locale.xml
@@ -330,22 +330,30 @@
<de><![CDATA[Seiten hinzufügen]]></de>
<en><![CDATA[Add pages]]></en>
</locale>
- <locale name="brick.control.setting.template">
+ <locale name="brick.control.slider.template">
<de><![CDATA[Slider Vorlage (template)]]></de>
<en><![CDATA[Slider template]]></en>
</locale>
- <locale name="brick.control.setting.template.onlyImages">
+ <locale name="brick.control.slider.template.onlyImages">
<de><![CDATA[Nur Bild (standard)]]></de>
<en><![CDATA[Only image (default)]]></en>
</locale>
- <locale name="brick.control.setting.template.imageAndText">
+ <locale name="brick.control.slider.template.imageAndText">
<de><![CDATA[Bild, Titel und Beschreibung]]></de>
<en><![CDATA[Image, title and description]]></en>
</locale>
- <locale name="brick.control.setting.slideHeight">
+ <locale name="brick.control.slider.template.slideHeight">
<de><![CDATA[Slider Höhe]]></de>
<en><![CDATA[Slider height]]></en>
</locale>
+ <locale name="brick.control.slider.button" html="true">
+ <de><![CDATA[Weiter <span class="fa fa-angle-right"></span>]]></de>
+ <en><![CDATA[More <span class="fa fa-angle-right"></span>]]></en>
+ </locale>
+ <locale name="brick.control.slider.more">
+ <de><![CDATA[Mehr]]></de>
+ <en><![CDATA[More]]></en>
+ </locale>
<locale name="brick.control.setting.limit">
<de><![CDATA[Limit]]></de>
<en><![CDATA[Limit]]></en>
@@ -400,8 +408,8 @@
</locale>
<locale name="brick.control.slider.title">
- <de><![CDATA[Bausteine: Seiten-Präsentation]]></de>
- <en><![CDATA[Bricks: Site-Presentation]]></en>
+ <de><![CDATA[Bausteine: Seiten-Präsentation (Carousel)]]></de>
+ <en><![CDATA[Bricks: Site-Presentation (Carousel)]]></en>
</locale>
<locale name="brick.control.promosliderWallpaper.title">
<de><![CDATA[Bausteine: Promoslider Wallpaper]]></de>
diff --git a/src/QUI/Bricks/Controls/Children/Slider.ImageAndText.css b/src/QUI/Bricks/Controls/Children/Slider.ImageAndText.css
new file mode 100644
index 0000000000000000000000000000000000000000..6a1492976e60669aad77b27295cdc266de7e31a3
--- /dev/null
+++ b/src/QUI/Bricks/Controls/Children/Slider.ImageAndText.css
@@ -0,0 +1,199 @@
+.quiqqer-bricks-children-slider {
+ float: none;
+ position: relative;
+ width: 100%;
+}
+
+.quiqqer-bricks-children-slider-container-wrapper {
+ position: relative;
+}
+
+.quiqqer-bricks-children-slider-container {
+ float: left;
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+
+.quiqqer-bricks-children-slider-container-inner {
+ float: left;
+ left: 0;
+ -webkit-overflow-scrolling: touch;
+ overflow-x: auto;
+ overflow-y: hidden;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+
+.quiqqer-bricks-children-slider-container-slide {
+ display: flex;
+ margin: 0 !important;
+ padding: 0 !important;
+ position: relative;
+}
+
+.quiqqer-bricks-children-slider-child {
+ display: inline-block;
+ float: none;
+ height: calc(100% - 2px);
+ padding: 0;
+ width: 25%;
+ flex-shrink: 0;
+}
+
+@media screen and (max-width: 1000px) {
+ .quiqqer-bricks-children-slider-child {
+ width: 33.3333%;
+ }
+}
+
+@media screen and (max-width: 767px) {
+ .quiqqer-bricks-children-slider-child {
+ width: 50%;
+ }
+}
+
+@media screen and (max-width: 500px) {
+ .quiqqer-bricks-children-slider-child {
+ width: 300px;
+ }
+}
+
+.quiqqer-bricks-children-slider-child-display {
+ border: 1px solid #dfe4e4;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ margin-left: 10px;
+ overflow: hidden;
+ padding: 0;
+}
+
+.quiqqer-bricks-children-slider-child:first-child .quiqqer-bricks-children-slider-child-display {
+ margin-left: 0;
+}
+
+/* image */
+.quiqqer-bricks-children-slider-child-image {
+ flex-shrink: 0;
+ /*height: 40%;*/
+ max-height: 40%;
+ overflow: hidden;
+}
+
+.quiqqer-bricks-children-slider-child-image a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+}
+
+.quiqqer-bricks-children-slider-child-image img {
+ max-height: initial;
+ max-width: initial;
+ height: 100%;
+ -webkit-transition: all 0.2s ease;
+ transition: all 0.2s ease;
+ width: auto;
+
+ width: auto;
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: cover;
+}
+
+.quiqqer-bricks-children-slider-child-image img:hover {
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+}
+
+/* content */
+.quiqqer-bricks-children-slider-child-content {
+ background: #fff;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ min-height: 0;
+ padding: 1rem;
+}
+
+.quiqqer-bricks-children-slider-child-content-short {
+ overflow: hidden;
+ margin-bottom: 1rem;
+}
+
+.quiqqer-bricks-children-slider-child-display-moreLink {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ color: inherit;
+ transition: 0.2s all;
+}
+
+.quiqqer-bricks-children-slider-child-display-moreLink:hover {
+ background: #f5f5f5;
+}
+
+.quiqqer-bricks-children-slider-child-content a {
+ margin-top: auto;
+}
+
+.quiqqer-bricks-children-slider-child-display-moreLink .fa {
+ font-size: 80px;
+ padding: 0 1em;
+}
+
+
+.quiqqer-bricks-children-slider-prev,
+.quiqqer-bricks-children-slider-next {
+ color: #f1f1f1;
+ cursor: pointer;
+ font-size: 50px;
+ height: 100%;
+ position: absolute;
+ text-align: center;
+ top: 0;
+ visibility: visible;
+ width: 50px;
+ z-index: 1;
+}
+
+.quiqqer-bricks-children-slider-next {
+ right: -50px;
+}
+
+.quiqqer-bricks-children-slider-prev {
+ left: -50px;
+}
+
+.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-next {
+ background: #fff;
+ border: 1px solid #f1f1f1;
+ border-bottom-left-radius: 5px;
+ border-top-left-radius: 5px;
+ right: 20px;
+ -webkit-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-prev {
+ background: #fff;
+ border: 1px solid #f1f1f1;
+ border-bottom-right-radius: 5px;
+ border-top-right-radius: 5px;
+ left: 20px;
+ -webkit-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
+
+.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-prev:hover,
+.quiqqer-bricks-children-slider-mobile .quiqqer-bricks-children-slider-next:hover {
+ background: rgba(0, 0, 0, 0.5);
+ -webkit-transition: all 0.5s ease;
+ transition: all 0.5s ease;
+}
diff --git a/src/QUI/Bricks/Controls/Children/Slider.ImageAndText.html b/src/QUI/Bricks/Controls/Children/Slider.ImageAndText.html
new file mode 100644
index 0000000000000000000000000000000000000000..f7d71d7debd0734d6d02723ec5632863199bf91a
--- /dev/null
+++ b/src/QUI/Bricks/Controls/Children/Slider.ImageAndText.html
@@ -0,0 +1,67 @@
+{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+<header class="control-header">
+ <h1>{$this->getAttribute('frontendTitle')}</h1>
+</header>
+{/if}
+
+{if $this->getAttribute('content') != ""}
+<div class="control-content">
+ {$this->getAttribute('content')}
+</div>
+{/if}
+
+<div class="quiqqer-bricks-children-slider-container-wrapper"
+ style="height: {$this->getAttribute('slideHeight')}px;">
+ <div class="quiqqer-bricks-children-slider-container">
+ <div class="quiqqer-bricks-children-slider-container-inner">
+ <ul class="quiqqer-bricks-children-slider-container-slide quiqqer-bricks-children-slider-container-slide__imageAndText"
+ style="height: {$this->getAttribute('slideHeight')}px;"
+ >
+ {strip}
+ {foreach from=$children item=Child}
+ <li class="quiqqer-bricks-children-slider-child">
+ <article class="quiqqer-bricks-children-slider-child-display">
+ <div class="quiqqer-bricks-children-slider-child-image">
+ <a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:'html'}">
+ {image src=$Child->getAttribute('image_site') title="{$Child->getAttribute('title')|escape:'html'}" width=600}
+ </a>
+ </div>
+ <div class="quiqqer-bricks-children-slider-child-content">
+ <h4 class="quiqqer-bricks-children-slider-child-content-title">
+ <a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:'html'}">
+ {$Child->getAttribute('title')}
+ </a>
+ </h4>
+
+ {if $Child->getAttribute('short')}
+ <div class="quiqqer-bricks-children-slider-child-content-short">
+ {$Child->getAttribute('short')}
+ </div>
+ {/if}
+
+ <a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:'html'}">
+ {locale group='quiqqer/bricks' var='brick.control.slider.button'}
+ </a>
+ </div>
+ </article>
+ </li>
+ {/foreach}
+ {/strip}
+
+ {if $MoreLink}
+ <li class="quiqqer-bricks-children-slider-child">
+ <article class="quiqqer-bricks-children-slider-child-display">
+ <a href="{url site=$MoreLink}" title="{$MoreLink->getAttribute('title')|escape:'html'}"
+ class="quiqqer-bricks-children-slider-child-display-moreLink">
+ <span class="fa fa-angle-right"></span>
+ <span class="quiqqer-bricks-children-slider-moreLink-text">
+ {locale group='quiqqer/bricks' var='brick.control.slider.more'}
+ </span>
+ </a>
+ </article>
+ </li>
+ {/if}
+ </ul>
+ </div>
+ </div>
+</div>
diff --git a/src/QUI/Bricks/Controls/Children/Slider.php b/src/QUI/Bricks/Controls/Children/Slider.php
index 7d0bfe19b5bfaf9f88db568051f2b77e603ed926..2f1f6a5222d4c1702f9aff462fc7225b00c178cc 100644
--- a/src/QUI/Bricks/Controls/Children/Slider.php
+++ b/src/QUI/Bricks/Controls/Children/Slider.php
@@ -52,10 +52,6 @@ public function getBody()
$this->setAttribute('slideHeight', $this->getAttribute('height'));
}
- if (!$this->getAttribute('slideHeight')) {
- $this->setAttribute('slideHeight', 200);
- }
-
if ($this->getAttribute('moreLink')) {
try {
$MoreLink = QUI\Projects\Site\Utils::getSiteByLink($this->getAttribute('moreLink'));
@@ -76,11 +72,15 @@ public function getBody()
$css = dirname(__FILE__).'/Slider.ImageAndText.css';
if (!$this->getAttribute('slideHeight')) {
- $this->setAttribute('slideHeight', 500);
+ $this->setAttribute('slideHeight', 600);
}
break;
}
+ if (!$this->getAttribute('slideHeight')) {
+ $this->setAttribute('slideHeight', 200);
+ }
+
$Engine->assign([
'this' => $this,
'children' => $this->getChildren(),