Content-Slider mit Tab-Navigation

[conter]

Hallo,

ich möchte einen Content-Slider (vertikales Sliden) mit Tab-Navigation bauen so wie mein Muster im Anhang.

Slideitmoo ist ja schon mal ganz gut.
Nur wie krieg ich es hin, das Sliden über das Tab-Menü und nicht mit Vorwärts- und Rückwärtsbuttons zu steuern?

Hat jemand eine Idee oder kennt noch eine andere Erweiterung, die sowas kann?

Danke und Gruß,
conter

[tblumrich]

Hi.

Guck dir mal den ce_slider an, mit dem solltest du sowas machen können... wenn ich dein anliegen korrekt verstanden habe.
Siehe: http://demo.contao-agentur.de/extensions/ce-slider.html

Gruß
Thomas

[andre.5tz]

Hallo,

die Umsetzung für einen Content Slider mit Tab-Navi interessiert mich auch.
Wenn ich es richtig verstehe, sollen die Tabs doch sicher wie eine Navigation mit individueller Beschriftung erstellt werden? Wie das gemacht werden kann wüsste ich auch gerne.

Da gibt es übrigens noch einige andere Slider wie z.B. den Nachrichtenslider und den pk_noobslider.

Es gibt eine Beispielseite für den noobslider, da müssten Sample 4 und 8 Deinen Vorstellungen etwa entspechen. Leider kann ich nicht sagen, wie leicht die in Contao, z.B. mit dem pk_noobslider (vermute der basiert auf noobslider) umgesetzt werden können.

VG
André

[conter]

Vielen Dank schon mal , ich werde die Erweiterungen mal ausprobieren!

[andre.5tz]

Mir fällt gerade auf , dass der Link von Thomas bereits das Beispiel vom ce_slider mit der Text-Navigation zeigt.
Damit wäre ja das Ziel erreicht, nur wie bekomme ich den Text in die Navigation rein?

In den Einstellungen für ce_slider start unter Navigation, Element Navigation habe ich Text eingestellt.

Dazu steht als Tooltipp:

Verwenden Sie einen Text den Sie im Element anlegen oder einfach nur einen Punkt.

Bei den Features auf Contao.org steht noch dazu "Erstellen von Navigationsbuttons die über das Content Element definiert werden können"

Nur wo und wie lege ich den Text/die Contentelemente für den Navigationstext jetzt an? Hat jemand einen Tipp für mich?

[lomex]

Im CE Hyperlink hast du eine Option ce_slider.

[andre.5tz]

Ich habes gefunden, DANKE!
Die Möglichkeit gibt es auch im CE Text wenn man richtig guckt

Dann dürfte der Rest noch aus css bestehen und dann passt das

[conter]

Hallo zusammen,

ce_slider trifft bislang wohl am besten, allerdings ...

finde ich es ein bißchen schade, dass itemholder und controller "lose" rumliegen und nicht in einem umgebenden ce_slider-Container. Kann ich aber im Template einbauen, also kein Problem.

Schwieriger ist, dass meine einzelnen, vertikal zu slidenden Bereiche unterschiedliche Höhen haben können, ich in der Konfiguration aber einen festen Wert für alle eintragen muss.
Height mit 100% oder auto zeigt keine Wirkung, dann wird gar keine Höhe angezeigt.
Wahrscheinlich weil er einfach die Höhe des CE noch gar nicht kennt ??

Hat eine eine Ahnung, ob flexible Höhen mit ce_slider überhaupt möglich sind?

Viele Grüße,
conter

[sepher]

[ Contao Version: 3.5.27 ]
----------------------------------

Hallo zusammen,

Ich weiss ich grabe hier alte Steine wieder aus doch dies ist der erste Post der zur Google Suche nach "Content Slider mit Tabs" gefunden wurde.

Deshalb hier meine Lösung zum Problem:

--- Problemstellung: ----
Ich wollte für einen Content Slider zusätzlich zur Pfeilnavigation auch noch eine Tab Navigation unterhalb.
Es soll sich dabei um die Slide-Bezeichnung handeln, die dann geklickt werden können um auf den entsprechenden Slide zu kommen.

------ Lösung: ---
---------------------------------------------------------------------------------------------------------------------------------------------
--- Im j_slider.html5: -----

...
var allSwipes = {}; // Objekt erstellen, um alle Slider darin zu speichern
(function($) {
...

'menu': $('.slider-control', cte)[0],
});
// Speichere aktuellen Slider in das erstellte Objekt mit seinem Namen
var currSlider = ($(this).attr('id')); // Die ID des Slide Startelements im Backend gibt den namen
allSwipes[currSlider] = newSwipe;
});
...
---------------------------------------------------------------------------------------------------------------------------------------
--- Mittels externem Javascript: -------

var menus = $('#SliderID .slider-wrapper div');
menus.each(function(index) {
var idName = $(this).attr( "id" );
$('.menu-buttons').append('<div class="button ' +idName+'">'+idName+'</div>');
console.log("index: "+index);
$(document).on('click', '.'+idName, function(){
//console.log("index: "+index);
allSwipes['IDSlideStartelement'].slide(index, 300); // Die ID des Slide Startelements wie im Template
});
});
-------------------------------------------------------------------------------------------------------------------------------------------
--- Im Backend
Im Backend muss nun dem Slide Startelement die ID gegeben werden (hier: IDSlideStartelement).
Den Einzelnen Slides (z.B. Textelementen wird ebenfalls eine ID gegeben, diese bestimmt den Namen des Tabs)



--------------------------------------------------------------------------------------------------------------------
Ich habe noch nicht getestet ob es funktioniert, wenn mehrere Slider auf einer Seite sind. Jedoch habe ich deshalb ein objekt gemacht um die Slider zu speichern und hoffe dass es funktioniert.
Vielleicht hilft es ja jemandem weiter

Gruss
Kajetan

[Andreas]

Man kann auch einfach die Dots als Tabs benutzen. Den Inhalt der Dots kann man aus den einzelnen Slides nehmen. Beispiel: Bild aus dem Slide als Hintergrund für die Dots (Tabs).

// JS (jQuery)

var 
  images = $('.slider-wrapper > div img'),
  dots = $('.slider-menu b')
;

for(i = 0; i < images.length; i++) {
  dots.eq(i).css('background-image', 'url(' + images.eq(i).attr('src') + ')');
}