# Image-Slider mit eigenem Content: erstes Slide nicht aktiv

**URL:** <https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489>\
**Category:** Programmierung\
**Created:** [15. Januar 2019 um 21:55 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489 "2019-01-15T21:55:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [15. Januar 2019 um 21:55 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489/1 "2019-01-15T21:55:54Z")

</div>

Hallo, ich habe einen Slider auf Basis des normalen Image-Sliders integriert. Der Slider funktioniert einwandfrei.&nbsp;

Leider wird der Slider-Dot des ersten Slides nicht aktiv, wenn man die Seite aufruft. Die Klasse is–active setze ich drauf, aber irgendwann nimmt sie wieder weg. Wenn man das erste Slide per Touch berührt, wird auch der Slider-Dot aktiv… woran kann das liegen?

Zudem wird bei jedem mal Sliden ein Fehler in der Chrome Console ausgelöst:

```
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [24. Januar 2019 um 14:01 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489/2 "2019-01-24T14:01:05Z")

</div>

hat hier jemand ne Idee?

---

<div class="post-metadata">

**Author:** ![TimTimTim](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@TimTimTim](https://forum.shopware.com/u/TimTimTim)\
**Post date:** [7. Februar 2019 um 10:44 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489/3 "2019-02-07T10:44:43Z")

</div>

Hi! Zeig mal bitte deinen Quellcode, den du nutzt. Ich habe ebenfalls einen Slider auf Basis des Image-Sliders in Verwendung und bei mir funktioniert es einwandfrei, wenn ich dem&nbsp;ersten „dot–link“ das „is–active“ initial mitgebe.

Zu deinem anderen Problem: Das hatte ich auch. Liegt wohl an einer Optimierung der Scrollfunktion im Chrome. Hier schaffte bei mir folgende CSS-Eigenschaft Abhilfe: touch-action: none;

Einfach im CSS der Klasse .image-slider diese Eigenschaft mitgeben:  
&nbsp;

```
.image-slider {
   touch-action: none;
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [7. Februar 2019 um 11:24 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489/4 "2019-02-07T11:24:36Z")

</div>

hi @TimTimTim‍

hier mein Code

```
                                249,00 €
                            
                        
                    
                
            
        
        
            
                
                    
                        
                            
                                
                                    
                                
                            
                        
                        
                            
                                249,00 €
                            
                        
                    
                
            
        
        [...]
    
    
        1
        2
        [...]

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![TimTimTim](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@TimTimTim](https://forum.shopware.com/u/TimTimTim)\
**Post date:** [7. Februar 2019 um 13:41 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489/5 "2019-02-07T13:41:50Z")

</div>

Der Code schaut in Ordnung aus. Wenn der erste Eintrag in der Dot-Navigation die “is–active” Klasse bekommen hat, sollte dieser&nbsp;auch beim Laden der Seite als aktiv angezeigt werden. Was sagt denn die Entwicklerkonsole, ist die Klasse dem ersten Eintrag hinzugefügt oder fehlt sie? Hast du irgendwelche Modifikationen am jquery.image-slider.js vorgenommen, die eventuell beim init die Klasse “klauen”?

&nbsp;

---

<div class="post-metadata">

**Author:** ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)\
**Post date:** [7. Februar 2019 um 14:00 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489/6 "2019-02-07T14:00:53Z")

</div>

die Klasse ist drauf, wird aber beim Rendern der Seite offenbar entfernt. Wenn ich eine beliebige andere Klasse drauf setze, dann bleibt die auch.

Der Dot wird wie gesagt aber sofort aktiv, sobald man das Slide auch nur berührt (touch oder klick).

Ich habe das Image-Slider-Plugin in jQuery etwas angepasst in einem Plugin, und zwar je ein Subscribe auf **onTrackItems** &nbsp;und einer auf&nbsp; **onRegisterEvents**

da führe ich noch spezifischen Code für “eigene” Arten von Slider aus, für spezielle Darstellungen. Das ist aber in ein IF gekapselt

```
if (me._$slide.hasClass("my-own-slider"))

```

… sollte also für alle anderen nicht greifen.

---

<div class="post-metadata">

**Author:** ![TimTimTim](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@TimTimTim](https://forum.shopware.com/u/TimTimTim)\
**Post date:** [7. Februar 2019 um 14:48 UTC](https://forum.shopware.com/t/image-slider-mit-eigenem-content-erstes-slide-nicht-aktiv/57489/7 "2019-02-07T14:48:16Z")

</div>

Beim init wird me.setActiveDot(me.\_slideIndex) aufgerufen. Der Parameter beinhaltet den Index des ersten Slide-Items (0), sollte man per Option nichts anderes festgelegt haben. Es sollte also von Haus aus auch dann der erste a-Tag der Dot-Navigation ausgewählt werden, wenn man die Klasse nicht schon im Markup mit angibt.

Da scheint es also irgendwo beim init bei dir zu klemmen. Kannst dir ja mal ein console.info('init dot index: ’ + me.\_slideIndex)&nbsp;in die jquery.slider-image.js z. B.&nbsp;nach der Zeile 501 einbauen. Eventuell hilft das ein wenig weiter.

```
if (opts.dotNavigation) {
  me._$dotNav = me.$el.find(opts.dotNavSelector);
  me._$dots = me._$dotNav.find(opts.dotLinkSelector);
  console.info('init dot index:' + me._slideIndex);
  me.setActiveDot(me._slideIndex);
}

```

&nbsp;
