Fehler bei jquery endlos carousel

[Fr3ddy]

Hi,
ich habe zwei fragen bezüglich meines karussell.
http://jsfiddle.net/qF39p/

Irgend wo muss beim ersten karussell ein fehler sein, denn es läuft nicht wie das zweite endlos, allerdings sollte der grundaufbau, dass 3 elemente in einem slider sind bei behalten werden, was habe ich da falsch gemacht?

Die zweite frage ist, ich habe 4 verschiedene mediaquery breakpoints, 1600px, 1200px, 960px und 640px. Wie kann ich das mit in das javascript einfliesen lassen, so dass sich die "slideWidth: 960," mit verändert?

LG & danke

 

[Tronjer]

Warum es nicht endlos läuft, lässt sich aus dem JSFiddle nicht beantworten.

Zur zweiten Frage: Der einfachste Weg wäre wahrscheinlich, die SlideWidth in einer Variablen abhängig von der Breite des Viewports zu übergeben. Dazu ein resize() Event, welches den Slider beim Erreichen der in den Media Queries gesetzten Breakpoints killt und danach mit dem veränderten Wert für SlideWidth neu aufruft.

 

[Tronjer]

Ergänzend zu meiner Antwort:

Um die slideWidth in Bezug zum Viewport und den MediaQueries zu setzen, könnte man ein switch-case Konstrukt verwenden oder alternativ dazu über ein Objekt iterieren. Dabei bin ich auf den interessanten Aspekt gestoßen, dass das auf den ersten Blick infrage kommende jQuery.each() keinen Wert zurückliefert, der sich in einer Variablen speichern lässt. Weil die Aufgabe doch etwas komplexer ist, als es den Anschein hat, poste ich nachfolgend einen Lösungsansatz. Die Werte für mediaQuery und imageWidth müssen natürlich angepasst werden.

var sliderImagesWidth = function () {

  var results = [],
  sliderValues = [
    { mediaQuery: 640, imageWidth: 320 },
    { mediaQuery: 960, imageWidth: 480 },
    { mediaQuery: 1200, imageWidth: 600 },
    { mediaQuery: 1600, imageWidth: 800 }
  ];

  if ( $(window).width() < sliderValues[0].mediaQuery ) {
    return sliderValues[0].imageWidth;
  } else if ( $(window).width() > sliderValues[sliderValues.length - 1].mediaQuery ) {
    return sliderValues[sliderValues.length - 1].imageWidth;
  } else {
    $.map(sliderValues, function(val, index) {
      if ( val.mediaQuery >= $(window).width() ) {
        results.push(val.imageWidth);
      }
      return results[0];
    });
  }
}

Damit gilt dann innerhalb des Slider-Aufrufs:

slideWidth: sliderImagesWidth()

 

[Fr3ddy]

Wow danke. :)

 

[Fr3ddy]

Nur komisch wieso das erste karusell nicht richtig endlos ist.

Wenn ich den wert von "minSlides: 1," auf "2" erhöhe funktioniert es aber dann werden zwei slider angezeigt im content.

 

[Tronjer]

Nicht zwei Bilder anstatt von zwei Slidern?

Weiß ja nicht, was du eigentlich willst, aber ich hatte vor längerer Zeit mal einen responsiven Slider gesucht, der aus einer Auswahl von Bildern immer so viele anzeigt wie im Div Platz haben. Da nichts passendes zu finden war, habe ich dann selber einen geschrieben.

http://goo.gl/dCdmxc

 

[Fr3ddy]

Ich brauche einen slider, wo ich in die einzelnen slides mehrere bilder und auch text einfügen kann, mit einer festen content größe aber aussehen soll das karusel als ob es über die volle breite geht. Genau so wie meinem beispiel, nur dass das erste karusel nicht endloss läuft, was ja das ganze problem ist.

 

[Tronjer]

Jeder Slider kann mehrere Bilder aufnehmen, sonst gäbe es ja nichts zum Sliden. ;)

Die Frage ist, ob er lediglich eines oder mehrere Bilder gleichzeitig anzeigen und dabei full responsive sein soll. Aus dem Grunde hatte ich mir, wie oben erwähnt, einen eigenen mit Ajax geschrieben.

Warum sich bei deinem BxSlider das Karussell nicht dreht, lässt sich lediglich aus der Doku, bzw. etwaiger Fehlermeldungen in der Konsole beantworten. Normaler Weise funktioniert das Plugin. Wahrscheinlich machst du irgend etwas falsch.

 

[Fr3ddy]

Ja, ich meinte natürlich mehrere bilder in einem slide. Und laut firebug gibt es keine js fehler.
Selber so etwas schreiben kann ich leider noch nicht aber ich dachte halt, dass sowas mit normalen slid carousels möglich wäre.

 

[Fr3ddy]

Da ich denke, dass der fehler mit der struktur zutun hat, habe ich mir ein anderes plugin gesucht aber hier habe ich auch noch eine frage.
Wenn man bei diesem beispiel den browser maximiert:
http://jsfiddle.net/s2mvZ/embedded/result/
Wird nur ein element vor dem content angezeigt, siehe bild.
Gibt es die möglichkeit, noch zwei weitere elemente zu laden?