Slider

Ich habe im Laufe der Zeit einen Image-Slider geschrieben den ich auf verschiedenen Websites verwende. Entweder eben als Slider auf der Hauptseite, oder als Bildergalerie in Einzelseiten. Selbst geschrieben habe ich ihn weil mich die Konfigurierbarkeit vieler anderer Slider sehr gestört hat und ich so Zugriff auf Aussehen wie auf Funktionalität habe.

Einige kleine Bugs sind durchaus noch auszumerzen, aber im großen und ganzen läuft er mittlerweile ganz gut. Angefangen hat es (wie so oft) mit einem Skript, dass immer weiter gewachsen ist und umgebaut wurde. Anfangs war alles recht starr gecoded und die Klassen, Maße etc. fest verbaut. Seit einiger Zeit können aber auch mehrere Instanzen des Sliders gleichzeitig verwendet werden und die Konfiguration findet beim Instanzieren statt, so wie es sein sollte.

Implementiert wird er durch die Funktion newSlider() im JavaScript:

    if (jQuery('.bannergroup')) {
newSlider(
'slider', // Identifier
16, // Y-Aspect
9, // X-Aspect
'.bannergroup', // Wrapper-Identifier
'.banneritem', // Slider-Item Identifier
);
}
else {
console.log('No slider wrapper found!');
}

Außerdem wird das Styling in SCSS mit dem Slider-Mixin durch:
(Bitte nicht von der gefühlten Länge abschrecken lassen, das meiste sind Kommentare 😉 )

// SET VARIABLES
$slider_base-size: 14px;
$slider_width: 100% !important;
$slider_item_width: 61.8%;
$slider_font_main: 'Calibri; sans-serif';
$slider_highlight-color-1: #0c0c0c;
$slider_highlight-color-2: #a5033e;
$slider_text-color: #ffffff;
$slider_base-color: #add0d8;
$slider_group_selector: '.bannergroup';
$slider_item_selector: '.banneritem';
$slider_text_selector: '.bannertext';
//
// ACTUALLY
// INCLUDE
// THE SLIDER
//
@include slider(
$slider_base-size, // Size from which Font & Button sizes, etc. are calculated
$slider_width, // Percent Value of the Slider width
$slider_item_width, // Percent Value of the items whithin the slider (creates overlaps, so one can see the next/last picture if smaller than 100%)
$slider_font_main, // The font you want to use for Text inside the Slider
$slider_highlight-color-1, // Darker is better
$slider_highlight-color-2, // Brighter is better
$slider_text-color, // White at best
$slider_base-color, // Only for (Slider-)Background, // Only for (Slider-)Background
$slider_group_selector, // Selector for the Wrapper element
$slider_item_selector, // Selector for the Slider-Items-Elements
$slider_text_selector // Selector for the Text-Element inside an Item
);

Dabei sollte das HTML ein .bannergroup-Element haben in welchem sich ein oder mehrere .banneritem-Elemente befinden. Darin wiederum kein oder ein .bannertext-Element in einem Link (man sollte ja auch irgendwohin kommen wenn es schon Text gibt). Es sollte also in etwa so aussehen damit es funktioniert:


<div class="bannergroup">
<div class="banneritem">
        <img src="https://simongehrig.de/wp-content/uploads/2014/11/11-03-0017_79ded0e1-b028-4362-a418-43595832fc8c-1-500x334.jpg" alt="" width="500" height="334" class="alignnone size-medium wp-image-349"></div>
<div class="banneritem">
        <img src="https://simongehrig.de/wp-content/uploads/2014/11/11-03-0015_ac6d94f0-3a10-4872-972b-3bf0a6f29bc1-1-500x334.jpg" alt="" width="500" height="334" class="alignnone size-medium wp-image-347">
<a href="#">
<div class="bannertext">Eins</div>
</a><a href="#">        </a>

</div>
<div class="banneritem">
        <img src="https://simongehrig.de/wp-content/uploads/2014/11/11-03-0014_15e17246-dba8-4faf-a5d2-d7d9bbe2bf06-1-500x334.jpg" alt="" width="500" height="334" class="alignnone size-medium wp-image-346">
<a href="#">
<div class="bannertext">Zwei</div>
</a><a href="#">        </a>

</div>
<div class="banneritem">
        <img src="https://simongehrig.de/wp-content/uploads/2014/11/11-03-0012_6038ace7-5a57-49ec-862c-c6b067e70920-1-500x334.jpg" alt="" width="500" height="334" class="alignnone size-medium wp-image-344">
<a href="#">
<div class="bannertext">Drei</div>
</a><a href="#">        </a>

</div>
<div class="banneritem">
        <img src="https://simongehrig.de/wp-content/uploads/2014/11/11-03-0010_b3ade88b-5bba-427f-a509-8171d4e65bde-1-500x750.jpg" alt="" width="500" height="750" class="alignnone size-medium wp-image-342"></div>
</div>

Das ganze könnt ihr euch zum aktuellen Stand hier herunterladen: Slider