The tiny slider (Product slide) count is wrong in shopware 6

abinjohnedamana · 19. Oktober 2023 um 06:05

The tiny slider (Product slide) count is wrong

Shopware using tiny slider node module for product slider.

The product slider shows the wrong count. Actually, there are 21 slides but the slider shows the count as 5.

The slider calculates the total number of slides by container.children.length which returns a wrong count

container is the div having class product-slider-container

shopware/shopware/blob/568ab6bced748a2e3bad277c0c9d2019462bcef7/src/Storefront/Resources/app/storefront/src/plugin/slider/base-slider.plugin.js#L166


      
          const controlsContainer = this.el.querySelector(this.options.controlsSelector);
          const onInit = () => {
              PluginManager.initializePlugins();
          
              this.$emitter.publish('initSlider');
          };
          
          if (container) {
              if (this._sliderSettings.enabled) {
                  container.style.display = '';
                  this._slider = tns({
                      container,
                      controlsContainer,
                      onInit,
                      ...this._sliderSettings,
                  });
              } else {
                  container.style.display = 'none';
              }
          }

github.com

ganlanyuan/tiny-slider/blob/4d709735c417c2483e77a22d017fc1b18c04f0d4/src/tiny-slider.module.js#L256


      
          }
          
          var horizontal = options.axis === 'horizontal' ? true : false,
              outerWrapper = doc.createElement('div'),
              innerWrapper = doc.createElement('div'),
              middleWrapper,
              container = options.container,
              containerParent = container.parentNode,
              containerHTML = container.outerHTML,
              slideItems = container.children,
              slideCount = slideItems.length,
              breakpointZone,
              windowWidth = getWindowWidth(),
              isOn = false;
          if (responsive) { setBreakpointZone(); }
          if (carousel) { container.className += ' tns-vpfix'; }
          
          // fixedWidth: viewport > rightBoundary > indexMax
          var autoWidth = options.autoWidth,
              fixedWidth = getOption('fixedWidth'),
              edgePadding = getOption('edgePadding'),

github.com

ganlanyuan/tiny-slider/blob/4d709735c417c2483e77a22d017fc1b18c04f0d4/src/tiny-slider.module.js#L1005


      
                }
              }
            }
          }
          
          function initTools () {
            // == slides ==
            updateSlideStatus();
          
            // == live region ==
            outerWrapper.insertAdjacentHTML('afterbegin', '<div class="tns-liveregion tns-visually-hidden" aria-live="polite" aria-atomic="true">slide <span class="current">' + getLiveRegionStr() + '</span>  of ' + slideCount + '</div>');
            liveregionCurrent = outerWrapper.querySelector('.tns-liveregion .current');
          
            // == autoplayInit ==
            if (hasAutoplay) {
              var txt = autoplay ? 'stop' : 'start';
              if (autoplayButton) {
                setAttrs(autoplayButton, {'data-action': txt});
              } else if (options.autoplayButtonOutput) {
                outerWrapper.insertAdjacentHTML(getInsertPosition(options.autoplayPosition), '<button type="button" data-action="' + txt + '">' + autoplayHtmlStrings[0] + txt + autoplayHtmlStrings[1] + autoplayText[0] + '</button>');
                autoplayButton = outerWrapper.querySelector('[data-action]');

Screenshot from 2023-10-19 11-22-35

Thema		Antworten	Aufrufe
Tiny slider loading Shopware 6 (English) themes--design	0	774	22. Juli 2021
Set customize items per page in slider. Shopware 3.5 general	1	3279	21. April 2017
Shopping-worlds, number of lines at Artikel-slider element International (English Only) themes--design	4	695	13. Dezember 2015
Using Tiny slider in custom Element Shopware 6 (English)	3	546	4. März 2024
"Touch-Slide" für maximierte Bilder auf Produktdetailseite aktivieren Shopware 6 (German)	2	161	9. Dezember 2023

The tiny slider (Product slide) count is wrong in shopware 6

Verwandte Themen