Momentan bin ich viel damit beschäftigt, ein WordPress-Theme zu bearbeiten (Bronx Drag & Drop). Ich habe dieses Thema verwendet, weil der Kunde leider in der Lage sein wollte, Anpassungen selbst vorzunehmen.
Slick Slider, ein horizontales Bildkarussell, das nur auf Mobilgeräten angezeigt wird, lässt Benutzer nicht über das Bild bis unter die Seite scrollen, da es horizontale Wischbewegungen verwendet, um durch die Bilder zu navigieren.
<div id="product-images" class="carousel slick product-images slick-initialized slick-slider" data-navigation="true" data-autoplay="false" rel="gallery" data-columns="1" data-asnavfor="#product-thumbnails"><button type="button" class="slick-nav slick-prev slick-arrow" aria-disabled="false" style="display: block;"></button>
<div aria-live="polite" class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 5112px;" role="listbox"><figure itemprop="image" class="easyzoom is-ready slick-slide" data-variation="" style="width: 568px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 1000ms ease;" tabindex="-1" role="option" aria-describedby="slick-slide10" data-slick-index="0" aria-hidden="true">
<a href="http://#2017/02/#_2076" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2076-640x700" title="#_2076"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide is-ready" data-variation="" style="width: 568px; position: relative; left: -568px; top: 0px; z-index: 998; opacity: 0; transition: opacity 1000ms ease;" tabindex="-1" role="option" aria-describedby="slick-slide11" data-slick-index="1" aria-hidden="true">
<a href="http://#2017/02/#_2077" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2077-640x700" title="#_2077"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide is-ready slick-current slick-active" data-variation="" style="width: 568px; position: relative; left: -1136px; top: 0px; z-index: 999; opacity: 1;" tabindex="-1" role="option" aria-describedby="slick-slide12" data-slick-index="2" aria-hidden="false">
<a href="http://#2017/02/#_2078" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="0"><# src="http://#2017/02/#_2078-640x700" title="#_2078"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide is-ready" data-variation="" style="width: 568px; position: relative; left: -1704px; top: 0px; z-index: 998; opacity: 0; transition: opacity 1000ms ease;" tabindex="-1" role="option" aria-describedby="slick-slide13" data-slick-index="3" aria-hidden="true">
<a href="http://#2017/02/#_2079" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2079-640x700" title="#_2079"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -2272px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide14" data-slick-index="4" aria-hidden="true">
<a href="http://#2017/02/#_2080" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2080-640x700" title="#_2080"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -2840px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide15" data-slick-index="5" aria-hidden="true">
<a href="http://#2017/02/#_2081" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2081-640x700" title="#_2081"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -3408px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide16" data-slick-index="6" aria-hidden="true">
<a href="http://#2017/02/#_2082" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2082-640x700" title="#_2082"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -3976px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide17" data-slick-index="7" aria-hidden="true">
<a href="http://#2017/02/#_2083" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2083-640x700" title="#_2083"></a>
</figure><figure itemprop="image" class="easyzoom slick-slide" data-variation="" style="width: 568px; position: relative; left: -4544px; top: 0px; z-index: 998; opacity: 0;" tabindex="-1" role="option" aria-describedby="slick-slide18" data-slick-index="8" aria-hidden="true">
<a href="http://#2017/02/#_2084" itemprop="image" class="fresco" data-fresco-group="product_images" data-fresco-group-options="overflow: true" data-fresco-type="image" tabindex="-1"><# src="http://#2017/02/#_2084-640x700" title="#_2084"></a>
</figure></div></div><button type="button" class="slick-nav slick-next slick-arrow" style="display: block;" aria-disabled="false"></button></div>
Ich versuche seit über 2 Stunden, dieses Problem zu beheben, und habe noch keine Lösung gefunden.
Jede Hilfe ist willkommen!