diff --git a/bin/Controls/Children/Slider.js b/bin/Controls/Children/Slider.js
index 81c9e29ef43f3ef0bb36f01534003e9f9ca8cc1a..ab545666dbbea5a4a3c2b07a67c6c5d656dacccd 100644
--- a/bin/Controls/Children/Slider.js
+++ b/bin/Controls/Children/Slider.js
@@ -38,14 +38,14 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
this.parent(options);
this.$SlideFX = null;
- this.$Prev = null;
- this.$Next = null;
- this.$Inner = null;
+ this.$Prev = null;
+ this.$Next = null;
+ this.$Inner = null;
this.$scrollLength = null;
- this.$scrollMax = 0;
- this.$mobile = true;
- this.$icons = null;
+ this.$scrollMax = 0;
+ this.$mobile = true;
+ this.$icons = null;
this.addEvents({
onImport: this.$onImport
@@ -71,7 +71,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
}
this.$scrollLength = (size.x / 1.2).round();
- this.$scrollMax = this.$Inner.getScrollSize().x - size.x;
+ this.$scrollMax = this.$Inner.getScrollSize().x - size.x;
this.$icons.setStyle('line-height', size.y);
this.$onScroll();
},
@@ -80,9 +80,9 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
* event : on import
*/
$onImport: function () {
- var Elm = this.getElm(),
- // var Elm = this.getElm().getElement('.wrapper').getElement('.quiqqer-bricks-children-slider-container'),
- size = Elm.getSize();
+ var Elm = this.getElm(),
+ size = Elm.getSize(),
+ wrapper = Elm.getElement('.quiqqer-bricks-children-slider-container-wrapper');
this.$Next = new Element('div', {
'class': 'quiqqer-bricks-children-slider-next hide-on-mobile',
@@ -96,7 +96,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
events : {
click: this.next
}
- }).inject(Elm);
+ }).inject(wrapper);
this.$Prev = new Element('div', {
'class': 'quiqqer-bricks-children-slider-prev hide-on-mobile',
@@ -110,14 +110,14 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
events : {
click: this.prev
}
- }).inject(Elm);
+ }).inject(wrapper);
this.$Inner = Elm.getElement(
'.quiqqer-bricks-children-slider-container-inner'
);
this.$SlideFX = new Fx.Scroll(this.$Inner);
- this.$icons = Elm.getElements('article a .quiqqer-icon');
+ this.$icons = Elm.getElements('article a .quiqqer-icon');
var scrollSpy = QUIFunctionUtils.debounce(this.$onScroll, 200);
@@ -189,7 +189,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
opacity = 1;
if (this.$mobile) {
- right = 0;
+ right = 0;
opacity = 0.8;
}
@@ -215,7 +215,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
opacity = 1;
if (this.$mobile) {
- left = 0;
+ left = 0;
opacity = 0.8;
}
@@ -275,7 +275,7 @@ define('package/quiqqer/bricks/bin/Controls/Children/Slider', [
var left = this.$Inner.getScroll().x;
var scrollSize = this.$Inner.getScrollSize().x;
- var domSize = this.$Inner.getSize().x;
+ var domSize = this.$Inner.getSize().x;
if (scrollSize <= domSize) {
this.hidePrevButton();
diff --git a/src/QUI/Bricks/Controls/Children/Slider.css b/src/QUI/Bricks/Controls/Children/Slider.css
index dcabd7139e4d4660716b4962f3dbf0e178e3dbb6..41b13a91f38156033c0349841e7379f0995acfb8 100644
--- a/src/QUI/Bricks/Controls/Children/Slider.css
+++ b/src/QUI/Bricks/Controls/Children/Slider.css
@@ -1,9 +1,13 @@
.quiqqer-bricks-children-slider {
- float: left;
+ float: none;
position: relative;
width: 100%;
}
+.quiqqer-bricks-children-slider-container-wrapper {
+ position: relative;
+}
+
.quiqqer-bricks-children-slider-container {
float: left;
height: 100%;
diff --git a/src/QUI/Bricks/Controls/Children/Slider.html b/src/QUI/Bricks/Controls/Children/Slider.html
index 2542ba42dd145feefa7da7562e58a3ac5e371654..9c24b5cafdb4037332e7c652f6976424cba52d26 100644
--- a/src/QUI/Bricks/Controls/Children/Slider.html
+++ b/src/QUI/Bricks/Controls/Children/Slider.html
@@ -1,4 +1,4 @@
-{*if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
<header class="control-header">
<h1>{$this->getAttribute('frontendTitle')}</h1>
</header>
@@ -8,48 +8,49 @@
<div class="control-content">
{$this->getAttribute('content')}
</div>
-{/if*}
+{/if}
-<!--<div class="wrapper" style="height: {$this->getAttribute('height')}px;">-->
-<div class="quiqqer-bricks-children-slider-container">
- <div class="quiqqer-bricks-children-slider-container-inner">
- <ul class="quiqqer-bricks-children-slider-container-slide"
- style="height: {$this->getAttribute('height')}px;"
- >
- {strip}
- {foreach from=$children item=Child}
- {assign var=hasImage value=0}
- {if $Child->getAttribute('image_site')}
- {assign var=hasImage value=1}
- {/if}
- <li class="quiqqer-bricks-children-slider-child">
- <article class="quiqqer-bricks-children-slider-child-display">
- <a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:" html"}">
- {if !$hasImage}
- <header>
- {$Child->getAttribute('title')}
- </header>
- {$Child->getAttribute('short')}
- {else}
- {image src=$Child->getAttribute('image_site') height=$this->getAttribute('height')}
+<div class="quiqqer-bricks-children-slider-container-wrapper"
+ style="height: {$this->getAttribute('height')}px;">
+ <div class="quiqqer-bricks-children-slider-container">
+ <div class="quiqqer-bricks-children-slider-container-inner">
+ <ul class="quiqqer-bricks-children-slider-container-slide"
+ style="height: {$this->getAttribute('height')}px;"
+ >
+ {strip}
+ {foreach from=$children item=Child}
+ {assign var=hasImage value=0}
+ {if $Child->getAttribute('image_site')}
+ {assign var=hasImage value=1}
{/if}
- </a>
- </article>
- </li>
- {/foreach}
- {/strip}
+ <li class="quiqqer-bricks-children-slider-child">
+ <article class="quiqqer-bricks-children-slider-child-display">
+ <a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:" html"}">
+ {if !$hasImage}
+ <header>
+ {$Child->getAttribute('title')}
+ </header>
+ {$Child->getAttribute('short')}
+ {else}
+ {image src=$Child->getAttribute('image_site') height=$this->getAttribute('height')}
+ {/if}
+ </a>
+ </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"}">
- <span class="quiqqer-icon fa fa-angle-right"></span>
- <span class="quiqqer-bricks-children-slider-moreLink-text">Mehr</span>
- </a>
- </article>
- </li>
- {/if}
- </ul>
+ {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"}">
+ <span class="quiqqer-icon fa fa-angle-right"></span>
+ <span class="quiqqer-bricks-children-slider-moreLink-text">Mehr</span>
+ </a>
+ </article>
+ </li>
+ {/if}
+ </ul>
+ </div>
</div>
-</div>
-<!--</div>-->
\ No newline at end of file
+</div>
\ No newline at end of file