Image-Slider mit eigenem Content: erstes Slide nicht aktiv

Shopware 5 Programmierung
1

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

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.

 

2

hat hier jemand ne Idee?

3

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 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:
 

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

 

4

hi @TimTimTim‍

hier mein Code

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

 

5

Der Code schaut in Ordnung aus. Wenn der erste Eintrag in der Dot-Navigation die “is–active” Klasse bekommen hat, sollte dieser 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”?

 

6

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  und einer auf  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.

7

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) in die jquery.slider-image.js z. B. 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);
}