Logoleiste mobil swipebar machen

[Winade_shop]

Hi,

wie kann mobil diese Logos als swipebare Leiste anzeigen lassen?

Danke!

[Gabe]

@Winade_shop 

• wie kann mobil diese Logos als swipebare Leiste anzeigen lassen?

Fragen hier zu stellen ist Sinn und Zweck der Community! Aber leider werden sehr wenige Infos oder Details angeboten, was zur Folge hat, dass wir sehr viele nachfolgende Follow-up Fragen stellen müssen, was das ganze sehr verzögert und nicht eine effiziente Verwendung deiner und unserer Zeit ist, vor allem heute noch vor dem Wochenende. Ich möchte dir je so viel wie möglich heute helfen ansonsten musst du ggf. bis Montag warten, ausser jemand anders beantwortet deine Fragen.

Ich würde dich also bitten - gib doch immer bitte mehr Angaben und/oder einen Link zu einem konkreten Beispiel.

Ds folgende in einer Testumgebung zuerst testen:

Warum das nicht mit einem "Custom HTML" Abschnitt im Theme editor versuchen und das folgende Code darin testen. Füge in der Abschnittsdatei den HTML-Code für den Logo-Slider hinzu. Du kannst eine Slider-Bibliothek wie Swiper.js verwenden, um den Swipe-Effekt zu erzeugen. Außerdem musst du den Liquid-Code hinzufügen, um die Logos in einer Schleife durchlaufen zu lassen und sie im Slider anzuzeigen.

Füge im Stylesheet des Themes den CSS-Code hinzu, um den Slider und die Logos zu gestalten. Du kannst Media-Queries verwenden, um den Swipe-Effekt nur auf mobilen Geräten anzuwenden.

Du musst die Logos in den Assets-Ordner deines Themes einfügen. Verwende im Liquid-Code den Filter asset_url, um die Logos im Slider zu referenzieren.

Hinweis: Der genaue Code und die einzelnen Schritte hängen von der Slider-Bibliothek, die du verwendest, deinem Theme und den Logos ab, die du einbinden möchtest.

Hier ist ein Beispiel für den HTML-Code, den du zum benutzerdefinierten HTML-Abschnitts hinzufügen kannst (theme-abhängig😞

<div class="logo-slider">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      {% for logo in section.settings.logos %}
        <div class="swiper-slide">
          <img src="{{ logo.image | asset_url }}" alt="{{ logo.alt_text }}">
        </div>
      {% endfor %}
    </div>
  </div>
</div>

In diesem Beispiel durchläuft der Liquid-Code die Logos in den Abschnittseinstellungen und erstellt für jedes Logo einen Slider. Der Filter asset_url wird verwendet, um das Bild für jedes Logo anzuzeigen.

Um Swiper.js zu verwenden, musst du den folgenden Code in den Head-Bereich des Themes einfügen oder ihn in eine separate .js-Datei aufnehmen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 20,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});
</script>

Und hier ist ein Beispiel für den CSS-Code, den du hinzufügen kannst, um den Logo-Slider zu gestalten:

.logo-slider {
  margin: 30px 0;
}

.swiper-container {
  overflow: hidden;
  width: 100%;
}

.swiper-slide {
  text-align: center;
}

.swiper-slide img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .swiper-container {
    direction: rtl;
  }
}

Hier setzt der CSS-Code die Breite des Bildschirms auf max. 767px Breite und des Slider-Containers auf 100%, zentriert die Bilder in jedem Slide und setzt die maximale Breite der Bilder auf 100%. Die Medienabfrage setzt die Richtung des Sliders auf mobilen Geräten auf RTL (von rechts nach links), wodurch der Swipe-Effekt entsteht.

Hinweis: Dies ist nur ein Beispiel und du musst den Code eventuell an deine speziellen Bedürfnisse und das Design deines Themes anpassen.

Die obigen Angaben sind OHNE GEWÄHR und bitte mit einem Experten besprechen bei weiteren Fragen!

VG,

[Winade_shop]

okay, danke dir. Das klingt mir mehr nach Developer. Ich versuche einfach immer herauszufinden, ob wir selbst etwas umsetzen können oder Hilfe brauchen 😉

[Gabe]

@Winade_shop 

Wenn du keinen Programmierer hast dann poste deine Frage nach einen Experten in unserer privaten FB Gruppe hier.

VG,