Wie ich einen wirklich adaptiven Slider (Karussell) gemacht habe

Guten Tag, liebe Leser und Schriftsteller!

Heute werde ich Ihnen erzählen, wie das Projekt mich mit der Aufgabe konfrontiert hat, einen adaptiven Schieberegler herzustellen, und was daraus entstanden ist

Über den Artikel und für wen es ist

Ich schreibe diesen Artikel nicht so sehr, weil ich eine Antwort der Community auf die Lösung dieses Problems erhalten möchte, sondern auch, weil mir das Lösen der Fragen des Artikels von grundlegender Bedeutung erscheint, um die Anpassungsfähigkeit des Schiebereglers im Web zu verstehen. Wenn jemand solche Komponenten bereits geschrieben hat, antworten Sie bitte und teilen Sie ähnliche Erfahrungen mit

Ein bisschen darüber, was passiert ist und welche Tools verwendet wurden

In der React-Anwendung müssen Sie ein Karussell erstellen (im Folgenden werde ich diesen Namen verwenden), dessen Elemente auf dem Bildschirm jeder Größe harmonisch aussehen. Es gibt mehrere Einschränkungen:

1. Die maximale Breite des Elements beträgt 150 px
2. Verwendetes Werkzeug - Eulenkarussell reagieren
3. Die maximale Größe des Behälters für das Karussell beträgt 1190 px
4. Es gibt auch Indikatoren für die Auffüllungseigenschaft für verschiedene Bildschirme (wirkt sich auf die Breite des sichtbaren Teils des Containers aus) und den Rand (zwischen Elementen mindestens 5 Pixel).
5. Das Karussell sollte in Zyklen laufen
   Und andere Bedingungen, die das Thema des Artikels nicht beeinflussen

Exkurs über die Mechanik des Karussells

Viele Karussells (React Owl Carousel ist keine Ausnahme) verwenden die spezielle aktive Klasse, um sie anzuzeigen, die die Elemente beschreibt, die derzeit auf dem Bildschirm angezeigt werden.

Um eine Endlosschleife auf dem Bildschirm anzuzeigen, werden das erste und das letzte Element dupliziert (die Mechanik und die Probleme dieser Synchronisation sind ein Thema für einen separaten Artikel).

Eigenschaften werden durch spezielle Objekte beschrieben. Wir werden uns für das responsive Objekt interessieren, das für die Neuzuweisung von Eigenschaften verantwortlich ist.

Der Rest der Daten zur Arbeitsmechanik wird im Verlauf der Beschreibung der Lösung klar.

Erste Probleme

Zunächst verlief alles reibungslos - die Elemente selbst wurden geschrieben und stilisiert, die grundlegenden Eigenschaften des gesamten Karussells wurden dargelegt. Probleme beim Setzen der Eigenschaft {loop: true}

Das Karussell schleift nicht ausreichend

Beim Scrollen zum Ende der Liste blieb freier Speicherplatz im Karussell und es wurde einige Zeit durch das Karussell gescrollt.

Der Grund war die maximale Breite des Elements, die nicht mit ihrer Anzahl übereinstimmte. Ein konkretes Beispiel ist die Breite des Containers 1190 px, wobei die Anzahl der Elemente auf 3 gesetzt ist.

Mit anderen Worten, das Karussell erwartet, dass sich 3 Elemente auf 1190 Pixel erstrecken und nicht größer als 150 Pixel werden können.

Erhöhen der Anzahl der Elemente

Das Problem nimmt einen anderen Blickwinkel ein: Wenn zu viele Elemente pro Container vorhanden sind, wird ihre Breite zu klein (und es enthält Inhalt!). Wenn ich die Eigenschaft min-width festlege, kriechen die Elemente bei einigen Bildschirmgrößen aufeinander und ignorieren den Rand, was die Bedingungen verletzt .

Wir fassen die Anpassungsbedingungen zusammen

1. Die Anzahl der Elemente auf dem Bildschirm sollte geringer sein als das Verhältnis von Bildschirmgröße zu
   Mindestbreite des Elements - andernfalls passen auch Elemente mit der Mindestbreite nicht auf den Bildschirm.
2. Das Verhältnis der Bildschirmgröße zur geschätzten Anzahl von Elementen sollte die maximal geschätzte Länge nicht überschreiten, da sonst ein Problem mit der Schleife auftritt.
3. Die oben beschriebenen Bedingungen müssen für jede Bildschirmgröße (von 330px bis 1190px) erfüllt sein.

Wir lösen das Problem als Programmierer

Wenn Sie sich dem Problem nacheinander nähern, ist es offensichtlich, dass Sie etwas aufgeben müssen, in meinem Fall war es die Mindestbreite des Elements.

Was sollte die Mindestbreite des Elements sein, damit für alle Containersiebe die Anpassungsbedingungen erfüllt sind?

//       const getBackTrace = (minScreen = 300, maxElementWidth = 150) => { let backTrace = {} for (let minElementWidth = maxElementWidth; minElementWidth > 0; minElementWidth--){ //            //     backTrace for(let screen = minScreen; screen <= 1100; screen++){ let elementCount = screen / minElementWidth | 0 if((screen / elementCount) > maxElementWidth){ backTrace[minElementWidth] = screen break } } } for(let key in backTrace){ //        ,      if (backTrace[key - 1] == undefined){ backTrace.result = key - 1 return backTrace } } } // getBackTrace(300, 150).result = 100 

Das Ergebnis in 100px passte nicht zu mir, da ich nicht den gesamten Inhalt in das Element einpassen kann. Deshalb setzen wir die Suche fort, bis wir den richtigen Wert gefunden haben und suchen, was wir sonst noch opfern können.

Erinnerst du dich an den Untertitel? Schreiben Sie zum Suchen eine Funktion

 const getMinScreen = (minWidth = 300, maxWidth = 767, maxElementWidth = 150) => { let research = [] //  ,          // getBackTrace,       for(let min = minWidth; min < maxWidth; min++){ let { result } = getBackTrace(min, maxElementWidth) research.push({result, min}) } //          "  "  return research .reduce((acc, curr, idx, arr) => { let obj = {} let {min, result} = curr obj[min] = result if(idx == 0) return obj if(arr[idx-1].result == result){ return {...acc} } else { return {...acc, ...obj} } }, {}) } /* Returned object {300: 100, 303: 101, 306: 102, 309: 103, 312: 104, 315: 105, 318: 106, 321: 107, 324: 108, 327: 109, 330: 110, 333: 111, 336: 112, 452: 113, 456: 114, 460: 115, 464: 116, 468: 117, 472: 118, 476: 119, 480: 120}   480    */ 

In Anbetracht des erhaltenen Objekts sehen Sie einen großen Sprung beim Übergang von 336px zu 452px.
Ich habe eine willensstarke Entscheidung getroffen, die Anpassungsfähigkeit auf 36px zu beschränken.

Wir beschreiben das adaptive Objekt

Es scheint, dass das Problem gelöst wurde, aber eine solche Lösung beweist nur, dass die Einhaltung der Bedingungen für Bildschirme ab 336px möglich ist, beschreibt jedoch nicht die Methode. Es gibt jedoch verschiedene Bedingungen, die mich bei der Herstellung eines Objekts mit Anpassungsfähigkeitseigenschaften einschränken
Nachdem ich für mich selbst akzeptiert hatte, dass die Mindestbreite eines Elements ohne Verluste 107 px betragen kann und den Randwert variiert, kam ich zu folgenden Indikatoren:

Sie müssen nur noch die empfangenen Daten in einem Heap sammeln und das adaptive Objekt implementieren:

 getResponsiveOwlItems = () => { let responsive = {}; responsive[0] = {items: 2, nav: false} // 112 = 107 (minimal div) + 5 (margins) let itemMinWidthReference = 112; const getOneWidth = deviceWidth => deviceWidth / itemMinWidthReference | 0 // 1190 - container width for(let i = itemMinWidthReference * 3 + 20; i <= 1190; i += itemMinWidthReference){ // .container padding > 768 90px + padding 90(.container) // .container padding < 768 40px + padding -40(.container) // +20px stagePadding let padding = i > 767 ? 200 : 20 if(i > (468 + padding)) { itemMinWidthReference = 117 } if(i > (767 + padding)) { itemMinWidthReference = 127 } let items = getOneWidth(i - padding) let nav = i > 700 ? true : false let margin = 5; if (i > 468){ margin = 10 } if (i > 767){ margin = 15 } responsive[i.toString()] = {items, nav, margin} //      itemMinWidthReference i = i - (i % itemMinWidthReference) + 1 } return responsive; } 

Am Tag der Veröffentlichung sieht alles logisch aus, und ich konnte den Fehler im Karussell nicht reproduzieren - wahrscheinlich funktioniert alles wie beabsichtigt.

Vielen Dank für Ihre Aufmerksamkeit und warten auf Ihre Kommentare und Kommentare!