Debut Theme: Slider anpassen auf feste Breite

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo zusammen,

ich habe im Moment auf der Startseite ein Bild als Header. Jetzt will ich das Bild um ein weiteres ergänzen und dafür daraus einen Slider-Header machen. Was bisher also „Foto mit überlegtem Text” war, wird jetzt die Funktion Slideshow. Nur kann ich im Slider nicht die Breite festlegen. Beim „Foto mit überlegtem Text” konnte ich unter „Layout” zwischen „Fest Breite” und „Volle Breite" wählen.

Wer kann helfen?

LG
Jan

2

@Playces Jan – Debut hat diese Funktion nicht out of the Box in Slideshow Sections.

Wenn Du global Deine Slideshows begrenzen willst …

Screenshot 2021-10-11 at 03.55.11.jpg
Screenshot 2021-10-11 at 03.55.11.jpg2736×1464 73.5 KB

… dann kannst Du die Datei /sections/slideshow.liquid öffnen und die folgenden beiden Zeilen (die, die mit markiert sind) einfügen:

Screenshot 2021-10-11 at 03.55.39.jpg
Screenshot 2021-10-11 at 03.55.39.jpg1512×262 67.5 KB

Screenshot 2021-10-11 at 03.55.55.jpg
Screenshot 2021-10-11 at 03.55.55.jpg946×284 29 KB

Ich hoffe, dass das hilft,
Mario

2 Likes
3

Mega, tausend Dank dir. Jetzt fehlen mir noch zwei Kleinigkeiten innerhalb dieses Sliders zu meinem Glück, vielleicht gibt es da eine ebenso schnelle Hilfe?

  1. Der Slider ist jetzt oben am Rand angeflanscht, das vorherige Headerbild hatte einen Abstand nach oben von 56 (?) Pixeln – hab das mal so grob grad nachgemessen. Kann ich das für den Slider auch definieren, wenn ja, wo?

  2. Ich möchte jedes Bild im Slider komplett verlinken und nicht wie im Slider vorgesehen einen Button dafür nutzen. Wo kann ich das wie definieren?

Megadank an alle, die sich dem Problem annehmen wollen :raising_hands:

4

@Playces – wenn Du eine stichhaltige Antwort zu deinem konkreten Anwendungsfall benötigst, benötigen wir einen Link zu deinem konkreten Anwendungsfall ^^

1 Like
5

Hi @r8r , dank dir für dein Feedback,

es geht um die Seite mnmalist.de – und das Headerbild dort, dass von besagtem Slider abgelöst werden soll.

Viele Grüße

Jan

6

Jan @Playces , danke. Gibt’s eventuell schon einen Vorschaulink zu der Implementierung mit Slider?

LG, Mario

1 Like
7

Hi @r8r , klar, sorry, hätt ich auch drauf kommen können. Here we go:

https://ronazxhhcmepe47a-56998690972.shopifypreview.com

8

@Playces

ad 1.)

main > .index-section--slideshow:first-child {
  margin-top: 0;
}

ad 2.) auf die Schnelle wär das mit js wahrscheinlich am einfachsten. Hier eine jQuery Implementierung aus dem Stegreif – ich glaub, dass jQuery aber nicht drinnen ist im Theme … hab jetzt gerade aber leider keine Zeit um da genauer drauf einzugehen:

$(document).ready(function() {
  $('.slideshow__btn').each(function(i) {
    url = $(this).attr('src');
    $(this).closest('.slideshow__slide').on('click', function(e) {
      window.location.href = url;
    });
  });
});

LG, Mario

2 Likes