About tctech

Explain to you how all this mistaken denouncing pleasure and praising pain was born and we will give you a complete simply free text account of the system, and expound the actual teachings.

Data Analysis
Product Development
Digital Marketing
Security System

Element System

Before / After Slider

Vorher/Nachher Vergleiche — horizontal und vertikal. Basiert auf img-comparison-slider.

Horizontal Mit Labels Custom Handle Hover Auto Vertikal

1 — Horizontal (Standard)

Transporter mit Teilfolierung Digitaldruck und Beschriftung

Werbung auf Transporter mit Digitaldruck und Beschriftungsfolien

<img-comparison-slider>
    <img slot="first"  src="/Assets/gfx/..." alt="Vorher Beschreibung" width="1200" height="800">
    <img slot="second" src="/Assets/gfx/..." alt="Nachher Beschreibung" width="1200" height="800">
</img-comparison-slider>

<!-- Startposition anpassen (Standard: 50) -->
<img-comparison-slider value="30">...

2 — Mit Before / After Labels

<img-comparison-slider>
    <figure slot="first" style="margin:0;">
        <img src="..." alt="...">
        <figcaption style="position:absolute;bottom:1rem;left:1rem;
            background:rgba(0,0,0,0.6);color:#fff;...">Vorher</figcaption>
    </figure>
    <figure slot="second" style="margin:0;">
        <img src="..." alt="...">
        <figcaption style="position:absolute;bottom:1rem;right:1rem;
            background:var(--primary);color:var(--on-primary);...">Nachher</figcaption>
    </figure>
</img-comparison-slider>

3 — Custom Handle (Primary-Farbe)

<img-comparison-slider style="
    --divider-width: 3px;
    --divider-color: var(--primary);
    --default-handle-opacity: 1;
">
    <img slot="first"  src="..." alt="...">
    <img slot="second" src="..." alt="...">

    <!-- Beliebiges HTML als Handle -->
    <svg slot="handle" width="48" height="48" viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="22" fill="var(--primary)"/>
        <path d="M16 24l-6-5v10l6-5z" fill="var(--on-primary)"/>
        <path d="M32 24l6-5v10l-6-5z" fill="var(--on-primary)"/>
        <line x1="24" y1="10" x2="24" y2="38" stroke="var(--on-primary)" stroke-width="2"/>
    </svg>
</img-comparison-slider>

<!-- CSS Custom Properties: -->
<!-- --divider-width          Breite der Trennlinie    -->
<!-- --divider-color          Farbe der Trennlinie     -->
<!-- --default-handle-opacity Handle-Sichtbarkeit      -->

4 — Hover Auto-Slide

Mit der Maus über das Bild fahren →

<!-- hover = automatisches Sliden mit der Maus -->
<!-- value="100" = startet mit Bild 2 vollständig sichtbar -->
<img-comparison-slider hover value="100">
    <img slot="first"  src="..." alt="...">
    <img slot="second" src="..." alt="...">
</img-comparison-slider>

5 — Vertikal (direction="vertical")

<img-comparison-slider direction="vertical">
    <img slot="first"  src="..." alt="...">
    <img slot="second" src="..." alt="...">
</img-comparison-slider>

before-after.php — Element System v1

→ Backgrounds → Alerts → Buttons