# Slider Index

**URL:** https://forum.shopware.com/t/slider-index/1745
**Category:** Shopware 3.5
**Tags:** programming
**Created:** [10. Februar 2011 um 19:29 UTC](https://forum.shopware.com/t/slider-index/1745 "2011-02-10T19:29:46Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![moeve.media](https://avatars.discourse-cdn.com/v4/letter/m/3da27b/32.png) [@moeve.media](https://forum.shopware.com/u/moeve.media)
#### Post date: [10. Februar 2011 um 19:29 UTC](https://forum.shopware.com/t/slider-index/1745/1 "2011-02-10T19:29:46Z")

</div>

Hallo an alle, kurze Frage: Ich habe jetzt den Slider auf der Startseite versucht zu verbreitern. Leider ohne Erfolg. Die Datei /plugins/recommendation/blocks\_index.tpl hatte ich schon auf 900px abgeändert. Leider passiert da nix. Auch in der CSS habe ich slider bzw. bannerSlider auf 900px eingestellt. Trotzdem ohne Erfolg… Jemand eine Idee???

---

<div class="post-metadata">

### Author: ![artep](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@artep](https://forum.shopware.com/u/artep)
#### Post date: [10. Februar 2011 um 22:07 UTC](https://forum.shopware.com/t/slider-index/1745/2 "2011-02-10T22:07:40Z")

</div>

In der plugin.css mußt Du alle 3 Zeilen auf 900 einstellen. `/\* Bannerslider \*/ #center .slider\_banner {width: 900px;} #center .slider\_banner .bannerSlider {width: 900px;height: 355px; position: relative; margin-bottom: 15px;} #center .slider\_banner .bannerSlider .sliding\_outer {position: relative; overflow: hidden; left: 0px; width: 900px; height: 355px;} `

---

<div class="post-metadata">

### Author: ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)
#### Post date: [11. Februar 2011 um 08:29 UTC](https://forum.shopware.com/t/slider-index/1745/3 "2011-02-11T08:29:25Z")

</div>

Das reicht nicht! Ich habe einen Slider verbreitert (828px). Dazu habe ich die shopware.js überlagert. Die eigene JS Datei muss dann noch über die header.tpl eingebunden werden. jquery.overload.js [code] (function() { .basket.init = function () { var width = 858; var position = ‘fixed’; if(.browser.msie && parseInt(.browser.version) == 6) { var width = width - 10; var position = ‘absolute’; } var modalConfig = { ‘position’: position, ‘animationSpeed’: 200, ‘width’: width+‘px’, ‘textContainer’: ’

', ‘textClass’: ‘ajax\_add\_article\_container’ }; var sliderConfig = { ‘headline’: false, ‘navigation’: false, ‘scrollSpeed’: 800, ‘rotate’: false, ‘width’:828, ‘height’: 210, ‘scrollWidth’: 828, ‘containerCSS’: { ‘margin’: ‘0 0 15px 15px’ } }; })(jQuery); [/code] Und dann noch die CSS Anpassungen: ` #center .slider\_banner .bannerSlider .sliding\_outer { width: 828px; } element.style { width: 2484px !important; } #content .slider\_banner .sliding\_container .slide { width: 828px; } #center .slider\_banner .bannerSlider { width: 828px; } #center .supplier\_slider { width: 828px !important; } #center .supplier\_slider .ajaxSlider { width: 828px !important; } ` Wenn du bezgl. dem element.style 2484px eine andere Lösung findest, sagst mir Bescheid. Ich habe drei Banner (3x 828px). Habe keinen anderen Weg gefunden, wie ich das dynamisch definieren kann.

---

<div class="post-metadata">

### Author: ![Brooce](https://avatars.discourse-cdn.com/v4/letter/b/7ab992/32.png) [@Brooce](https://forum.shopware.com/u/Brooce)
#### Post date: [16. März 2011 um 12:59 UTC](https://forum.shopware.com/t/slider-index/1745/4 "2011-03-16T12:59:49Z")

</div>

Sind die Änderungen jetzt so ausreichend, dass man dadurch die Größe des Sliders beeinflussen kann?

---

<div class="post-metadata">

### Author: ![avenger](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@avenger](https://forum.shopware.com/u/avenger)
#### Post date: [16. März 2011 um 13:14 UTC](https://forum.shopware.com/t/slider-index/1745/5 "2011-03-16T13:14:07Z")

</div>

[quote=„ottscho“]Das reicht nicht! Ich habe einen Slider verbreitert (828px). Dazu habe ich die shopware.js überlagert. Die eigene JS Datei muss dann noch über die header.tpl eingebunden werden. jquery.overload.js [code] (function() { .basket.init = function () { var width = 858; var position = ‚fixed‘; if(.browser.msie && parseInt(.browser.version) == 6) { var width = width - 10; var position = ‚absolute‘; } var modalConfig = { ‚position‘: position, ‚animationSpeed‘: 200, ‚width‘: width+‚px‘, ‚textContainer‘: ’

', ‚textClass‘: ‚ajax\_add\_article\_container‘ }; var sliderConfig = { ‚headline‘: false, ‚navigation‘: false, ‚scrollSpeed‘: 800, ‚rotate‘: false, ‚width‘:828, ‚height‘: 210, ‚scrollWidth‘: 828, ‚containerCSS‘: { ‚margin‘: ‚0 0 15px 15px‘ } }; })(jQuery); [/code] Und dann noch die CSS Anpassungen: ` #center .slider\_banner .bannerSlider .sliding\_outer { width: 828px; } element.style { width: 2484px !important; } #content .slider\_banner .sliding\_container .slide { width: 828px; } #center .slider\_banner .bannerSlider { width: 828px; } #center .supplier\_slider { width: 828px !important; } #center .supplier\_slider .ajaxSlider { width: 828px !important; } ` Wenn du bezgl. dem element.style 2484px eine andere Lösung findest, sagst mir Bescheid. Ich habe drei Banner (3x 828px). Habe keinen anderen Weg gefunden, wie ich das dynamisch definieren kann.[/quote] Also das Überlagern der JS sollte man sich gut sparen können… `#center .slider\_banner .bannerSlider .sliding\_outer { width: 828px; } element.style { width: 2484px !important; } #content .slider\_banner .sliding\_container .slide { width: 828px; } #center .slider\_banner .bannerSlider { width: 828px; }` Ein „!important“ hinter den width-Definitionen sollte reichen. `element.style { width: 2484px !important; }` hat übrigens keinerlei Wirkung, da das ja kein valider Selektor ist… Auf welches HTML-Element sollte der Browser das anwenden? Damit zeigt FireBug nur an, welche Styles im Element direkt definiert sind.

---

<div class="post-metadata">

### Author: ![Brooce](https://avatars.discourse-cdn.com/v4/letter/b/7ab992/32.png) [@Brooce](https://forum.shopware.com/u/Brooce)
#### Post date: [16. März 2011 um 14:29 UTC](https://forum.shopware.com/t/slider-index/1745/6 "2011-03-16T14:29:07Z")

</div>

@avenger Ich komm jetzt nicht ganz dahinter. Wie sollte ich genau vorgehen? In welchen Dateien Änderungen vornehmen?

---

<div class="post-metadata">

### Author: ![mthrum](https://avatars.discourse-cdn.com/v4/letter/m/e95f7d/32.png) [@mthrum](https://forum.shopware.com/u/mthrum)
#### Post date: [17. März 2011 um 15:09 UTC](https://forum.shopware.com/t/slider-index/1745/7 "2011-03-17T15:09:48Z")

</div>

avenger wollte dir sagen, das du nicht element.style { width: 2484px !important; } in deiner CSS Datei verwenden sollst, da das nur die Anzeige im Firebug bei dynamisch angewendeten CSS Regeln auf das gerade aktive Node ist. Mach dir eine Kopie der plugins.css in deinem templates/DeinTemplate/frontend/\_resources/styles Verzeichnis und ändere folgende Zeilen in der kopierten CSS Datei. `.slider\_banner {width: 900px !important;}#newline##center .slider\_banner .bannerSlider {width: 900px !important;height: 355px; position: relative; margin-bottom: 15px;}#newline##center .slider\_banner .bannerSlider .sliding\_outer {position: relative; overflow: hidden; left: 0px; width: 900px !important; height: 355px;}`

---

<div class="post-metadata">

### Author: ![grischek](https://avatars.discourse-cdn.com/v4/letter/g/85f322/32.png) [@grischek](https://forum.shopware.com/u/grischek)
#### Post date: [17. März 2011 um 15:13 UTC](https://forum.shopware.com/t/slider-index/1745/8 "2011-03-17T15:13:53Z")

</div>

Hallo. Wo finde ich die plugins.css??? Lg.

---

<div class="post-metadata">

### Author: ![avenger](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@avenger](https://forum.shopware.com/u/avenger)
#### Post date: [17. März 2011 um 15:55 UTC](https://forum.shopware.com/t/slider-index/1745/9 "2011-03-17T15:55:15Z")

</div>

[quote=“grischek”]Hallo. Wo finde ich die plugins.css??? Lg.[/quote] \_resources/styles

---

<div class="post-metadata">

### Author: ![grischek](https://avatars.discourse-cdn.com/v4/letter/g/85f322/32.png) [@grischek](https://forum.shopware.com/u/grischek)
#### Post date: [17. März 2011 um 16:24 UTC](https://forum.shopware.com/t/slider-index/1745/10 "2011-03-17T16:24:04Z")

</div>

Danke und Bedankung abgegeben.
