Modifiable

Please ensure to comply with the corporate identity.

Theme slider

A slider component for cycling through elements - theme-cards (image, sub-header and title with a link) - like a carousel. The items are based on the Card component and use image, title and subtitle. So you have to include the Card component CSS to use the product tile.

Modifier classes represent the difference to Card component. If a modifier is used, a prefix to the original class is added. For example .card is original and .theme-slider-card the modification.

Overview#

Theme slider rely on the 3rd party library Tiny-Slider in version 2.9.3. You must use themeSlider.js which contains tiny-slider.js in order for theme slider to work!

How it works#

The theme slider is a slider for cycling through a series of theme-cards, built with CSS 3D transforms and a bit of JavaScript. It also includes support for previous/next controls with automatic hide and show. Please be aware that nested carousels are not supported. Lastly, if you’re building our JavaScript from source, it requires themeSlider.js.

Theme slider example#

Using the following syntax, you can create a theme slider with button controls and multiple theme-cards.

preview<html>JS

<div class="theme-slider " data-controller="theme-slider">
    <button class="btn btn-slider theme-slider-btn theme-slider-btn-prev"
        data-controller="theme-slider-previous">
        <svg class="icon icon-2" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
            <title>Previous Slide</title>
            <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-left">
            </use>
        </svg>
    </button>
    <button class="btn btn-slider theme-slider-btn theme-slider-btn-next"
        data-controller="theme-slider-next">
        <svg class="icon icon-2" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
            <title>Next Slide</title>
            <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-right">
            </use>
        </svg>
    </button>
    <ul class="theme-slider-slides" data-controller="theme-slider-slides">
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cat" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide theme-slider-slide-active">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                        with more text and new line</div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
    </ul>
</div>

import "./cakeDOM";
import {
    tns
} from "tiny-slider/src/tiny-slider";

if (typeof window.cake !== "object") {
    window.cake = {};
}

const defaultOptions = {
    sliderElements: [],
    sliderQuerySelector: '*[data-controller="theme-slider"]',
    sliderListElements: [],
    sliderListQuerySelector: '*[data-controller="theme-slider-slides"]',
    sliderPreviousButtonElements: [],
    sliderPreviousButtonuerySelector: '*[data-controller="theme-slider-previous"]',
    sliderNextButtonElements: [],
    sliderNextButtonuerySelector: '*[data-controller="theme-slider-next"]',
    tinySliderOptions: {},
    autoInitialize: true,
};

class themeSlider {

    constructor(
        sliderConfig = {},
        autoInitialize = true,
        sliderWrapperEl,
        sliderListEl,
        previousButtonEl,
        nextButtonEl,
    ) {
        //Chek if SliderWrapperEl exists
        this.sliderWrapperEl = sliderWrapperEl;
        if (!this.sliderWrapperEl) {
            console.warn("Theme-Slider:", "sliderWrapperEl is no valid HTMLElement",
                sliderWrapperEl);
        }

        //Check if all the other elements has to be set
        this.sliderListEl = sliderListEl;
        this.previousButtonEl = previousButtonEl;
        this.nextButtonEl = nextButtonEl;

        //Set Slider-Config and overwrite defaults
        this.sliderConfig = sliderConfig;

        //Some default Class-Attributes
        this.slider = null;
        this.timeouts = [];
        this.garbageCollection = {};

        //Initialize Slider, if set up in config
        if (autoInitialize) {
            this.initialize();
        }
    }

    initialize() {
        //Only initialize once
        if (this.slider) {
            return;
        }

        //Remove no-js behaviour
        this.garbageCollection.sliderNoJsAvailable = this.sliderWrapperEl.classList.contains(
            'theme-slider-nojs');
        if (this.garbageCollection.sliderNoJsAvailable) {
            this.sliderWrapperEl.classList.remove('theme-slider-nojs');
        }
        //Set overflow:hidden on wrapper element, so that tiny-slider does work
        this.garbageCollection.sliderWrapperElStyleOverflow = this.sliderWrapperEl.style
            .overflow;
        this.sliderWrapperEl.style.overflow = "hidden";

        //Initialize Slider
        this.slider = tns(this.sliderConfig);

        //**                     */
        //**    EVENT-LISTENERS  */
        //**                     */

        //Add Resize Event listener
        window.resizeThrottled(() => {
            this.refreshSlider();
        }, 300);


        //Add Click Event listener
        const isDefaultSliding = this.sliderConfig.slideBy !== "page" || this.sliderConfig
            .fixedWidth;
        this.garbageCollection.previousButtonClickEvent = () => {
            if (isDefaultSliding) {
                this.slider.goTo('prev');
            } else {
                this.slider.goTo(this.calculateNewIndex("prev"));
            }
        };
        this.previousButtonEl.addEventListener('click', this.garbageCollection
            .previousButtonClickEvent);
        this.garbageCollection.nextButtonClickEvent = () => {
            if (isDefaultSliding) {
                this.slider.goTo('next');
            } else {
                this.slider.goTo(this.calculateNewIndex("next"));
            }
        };
        this.nextButtonEl.addEventListener('click', this.garbageCollection
        .nextButtonClickEvent);


        this.slider.events.on('transitionEnd', (sliderInfo) => {
            //Update Button visibility
            setTimeout(() => this.updateButtonOpacity(), 50);
        });


        //Initialize Slider
        this.refreshSlider(true);
    }

    terminate() {
        //Only terminate once
        if (!this.slider) {
            return;
        }

        //Remove button events
        this.previousButtonEl.removeEventListener("click", this.garbageCollection
            .previousButtonClickEvent);
        this.nextButtonEl.removeEventListener("click", this.garbageCollection
            .nextButtonClickEvent);

        //Hide buttons
        this.showButton(this.previousButtonEl, false);
        this.showButton(this.nextButtonEl, false);

        //Remove slider-item focus events
        this.garbageCollection.sliderItemFocusEvents.forEach(sliderItemFocusEvent => {
            sliderItemFocusEvent.el.removeEventListener("focus", sliderItemFocusEvent
                .event);
        });

        //Add no-js behaviour, if it was available before
        if (this.garbageCollection.sliderNoJsAvailable) {
            this.sliderWrapperEl.classList.add('theme-slider-nojs');
        }
        //Reverse overflow on wrapper element, so that it has the previous status
        this.sliderWrapperEl.style.overflow = this.garbageCollection
            .sliderWrapperElStyleOverflow;

        //Deconstruct slider
        this.slider.destroy();
        this.slider = null;

        //Delte garbage-collection tmp-variable
        this.garbageCollection = {};
    }

    //Detects the actual status of the slider
    //returns: start | middle | end | disabled
    get sliderStatus() {
        const sliderInfo = this.info;

        //Check if slider is disabled
        if (!sliderInfo.isOn) {
            return "disabled";
        }

        //Check if all slider-items are visible at once
        if (sliderInfo.displayIndex === 1 && sliderInfo.slideCountNew - sliderInfo.slideBy <=
            0) {
            return "disabled";
        }

        //Check if there are not all items visible
        if (sliderInfo.index + sliderInfo.slideBy >= sliderInfo.slideCountNew) {
            return "end";
        }

        //calculate bounding boxes of the slider and ul element
        const themeSliderRect = this.sliderWrapperEl.getBoundingClientRect();
        const themeSliderRectWidth = this.sliderWrapperEl.scrollWidth;
        const sliderRect = this.sliderListEl.getBoundingClientRect();
        const sliderRectWidth = this.sliderListEl.scrollWidth;
        const lastItemRect = sliderInfo.slideItems[sliderInfo.slideItems.length - 1]
            .getBoundingClientRect();

        //Check if on index = 1 and last item is visible => disabled
        if (sliderInfo.displayIndex === 1 && lastItemRect.right <= themeSliderRect.right) {
            return "disabled";
        }

        //Check if last item.right is the same value than themeSliderRect.right
        if (Math.round(lastItemRect.right) <= Math.round(themeSliderRect.right)) {
            return "end";
        }

        //Check if slider is on end (if last item is fully visible in viewport)
        if ((sliderRect.x || sliderRect.left) + sliderRectWidth <= (themeSliderRect.x ||
                themeSliderRect.left) + themeSliderRectWidth + this.sliderConfig.gutter) {
            return "end";
        }

        //Check if slider is disabled (last item in puffer at the end)
        let positionDiff = ((sliderRect.x || sliderRect.left) + sliderRectWidth) - ((
            themeSliderRect.x || themeSliderRect.left) + themeSliderRectWidth);
        if (positionDiff < this.sliderConfig.gutter + 1 && positionDiff > 0) {
            return "disabled";
        }

        //Check if slider is on start (first item as display-index)
        if (sliderInfo.displayIndex === 1) {
            return "start";
        }

        //Otherwise the slider is in middle
        return "middle";
    }

    get info() {
        return this.slider.getInfo();
    }

    //Find out somehow, how many items are fully visible in the slider
    get itemsVisiblePerPage() {
        const sliderItems = this.info.slideItems;
        const sliderContainerRect = this.sliderWrapperEl.getBoundingClientRect();
        let visibleOnOnePage = 0;
        for (let sliderItem of sliderItems) {
            const sliderItemRect = sliderItem.getBoundingClientRect();
            if (sliderItemRect.left >= sliderContainerRect.left && sliderItemRect.right <=
                sliderContainerRect.right) {
                visibleOnOnePage++;
            }
        }
        return visibleOnOnePage;
    }

    calculateNewIndex(direction = "next") {
        const sliderItemCount = this.info.slideCountNew;
        const visibleOnOnePage = this.itemsVisiblePerPage;

        let newIndex = 0;
        if (direction === "next") {
            newIndex = this.info.index + visibleOnOnePage;
            if (newIndex >= sliderItemCount - visibleOnOnePage) {
                newIndex = sliderItemCount - visibleOnOnePage + 1;
            }
        } else {
            newIndex = this.info.index - visibleOnOnePage;
            if (newIndex < 0) {
                newIndex = "first";
            }
        }
        return newIndex;
    }

    //Hide and Show the Previos and Next Buttons
    showButton(buttonEl, show = true, init = false) {
        if (show) {
            if (buttonEl.style.opacity != 1 || init) {
                if (this.timeouts.length > 0) {
                    clearTimeout(this.timeouts.shift());
                }
                buttonEl.disabled = false;
                buttonEl.style.display = 'block';
                setTimeout(() => {
                    buttonEl.style.opacity = 1;
                }, 10);
                buttonEl.setAttribute('aria-hidden', 'false');
            }
        } else {
            if (buttonEl.style.opacity != 0 || init) {
                buttonEl.style.opacity = 0;
                buttonEl.setAttribute('aria-hidden', 'true');
                this.timeouts.push(setTimeout((buttonEl) => {
                    buttonEl.disabled = true;
                    buttonEl.style.display = 'none';
                }, this.sliderConfig, buttonEl));
            }
        }
    };

    //Decide which button should hide and show
    updateButtonOpacity(init = false) {
        switch (this.sliderStatus) {
            case "start":
                this.showButton(this.previousButtonEl, false, init);
                this.showButton(this.nextButtonEl, true, init);
                break;
            case "end":
                this.showButton(this.previousButtonEl, true, init);
                this.showButton(this.nextButtonEl, false, init);
                break;
            case "middle":
                this.showButton(this.previousButtonEl, true, init);
                this.showButton(this.nextButtonEl, true, init);
                break;
            case "disabled":
                this.showButton(this.previousButtonEl, false, init);
                this.showButton(this.nextButtonEl, false, init);
                break;
        }
    }

    //Refresh Slider on Resize and Initially to correct position changes
    refreshSlider(init = false) {
        if (!this.slider) {
            return;
        }
        //Update Slider
        this.slider.refresh();

        if (init) {
            this.initializeSliderFocusListener();
        }

        //Update Buttons
        this.updateButtonOpacity(init);
    };

    //Initialize Slider-Focus listener
    initializeSliderFocusListener() {
        this.garbageCollection.sliderItemFocusEvents = [];
        const sliderInfo = this.info;
        const sliderElementCount = sliderInfo.slideItems.length;
        for (let i = 0; i < sliderElementCount; i++) {
            const sliderItem = sliderInfo.slideItems[i];
            const focusEvent = (e) => {
                const sliderInfo = this.info;

                let index = sliderInfo.index;
                if (i <= sliderInfo.index) {
                    //prev
                    index = i - sliderInfo.slideBy + 1
                } else if (i === (sliderInfo.slideBy + sliderInfo.index) - 1) {
                    //next
                    index = i - 1;
                }

                index = index < 0 ? 0 : index;
                index = index > sliderElementCount - sliderInfo.slideBy ?
                    sliderElementCount - sliderInfo.slideBy : index;
                if (index !== sliderInfo.index) {
                    this.slider.goTo(index);
                }
            };
            this.garbageCollection.sliderItemFocusEvents.push({
                el: (sliderItem.firstElementChild || sliderItem.firstChild),
                event: focusEvent
            });
            (sliderItem.firstElementChild || sliderItem.firstChild).addEventListener("focus",
                focusEvent);
        }
    }

}

window.cake.themeSlider = (options = defaultOptions) => {
    options = {
        ...defaultOptions,
        ...options
    };
    let sliders = [];
    const themeSliderElements = window.cake.utils.getElements(options.sliderElements, options
        .sliderQuerySelector);
    for (const [idx, themeSliderElement] of themeSliderElements.entries()) {
        const themeSliderListElement = window.cake.utils.getElement(options.sliderListElements[
            idx], options.sliderListQuerySelector, themeSliderElement);
        const themeSliderPreviousButtonElement = window.cake.utils.getElement(options
            .sliderPreviousButtonElements[idx], options.sliderPreviousButtonuerySelector,
            themeSliderElement);
        const sliderNextButtonElementElement = window.cake.utils.getElement(options
            .sliderNextButtonElements[idx], options.sliderNextButtonuerySelector,
            themeSliderElement);

        sliders.push(
            new themeSlider({
                    container: themeSliderListElement,
                    controls: false,
                    nav: false,
                    axis: 'horizontal',
                    loop: false,
                    swipeAngle: false,
                    arrowKeys: false, //prevent slide with arrow-keys
                    touch: true,
                    mouseDrag: false,
                    speed: 350,
                    slideBy: 'page',
                    gutter: 8,
                    fixedWidth: 120, //Needs to be set, to make page-slide possible
                    responsive: {
                        600: {
                            fixedWidth: 160,
                        }
                    },
                    // edgePadding: 8,
                    ...options.tinySliderOptions,
                },
                options.autoInitialize,
                themeSliderElement,
                themeSliderListElement,
                themeSliderPreviousButtonElement,
                sliderNextButtonElementElement
            )
        );
    }
    return sliders;
};

export default window.cake.themeSlider;

ThemesliderDefault

Usage#

Via data attributes and built-in javascript#

Use data attributes to enable the slider functionality. There are different data-controller attributes you have to use for different functionalities and elements:

data-controller="theme-slider": the surrounding container-element which holds all controls and theme slider elements
data-controller="theme-slider-slides": the element containing all the slides as child-elements
data-controller="theme-slider-previous": the control for showing previous page of theme slider
data-controller="theme-slider-next": the control for showing the next page of theme slider

To make the theme slider work, you have to use all the four data-controller attributes and at least one slider-item inside the theme-slider-slides element. Besides that, the theme-slider-slides element can be a list (ul) like in the example above, or simply any other element holding multiple child elements with the related CSS classes.

You can extend and customize the built-in JavaScript library of the theme slider by passing a tinySliderOptions-object into the themeSlider ({…}) constructor. As we used the tiny-slider for the core-functionality of theme slider you can pass all option attributes into the constructor like they are listed on their documentation. > But be careful, because none of these options are guranteed to work with CAKE's implementation!

As an example, you can set the arrowKeys attribute to true, if you want to be able to control the theme slider with your keyboard. Or you can loop through the elements instead of having a fixed start and end of the slider.

themeSlider ({
    tinySliderOptions: {
        arrowKeys: true,
        loop: true
    }
});

Via JavaScript#

The theme slider does work without javascript. To enhance the features of the theme slider we recommend to use our javascript. You can import our javascript bundle cake.js to automatically use these features. You only must ensure that the above mentioned data-controllers are properly configured.

Initialization#

To initialize the javascript with default configuration you could simply run the following code:

document.addEventListener ('DOMContentLoaded', () => {
    window.cake.themeSlider ();
});

Customization#

To customize the default behavior you can only embedd the themeSlider.js file into your mockups. Then you can initialize the functionality by calling:

document.addEventListener ('DOMContentLoaded', () => {
    window.cake.themeSlider (options = {
        sliderElements: [],
        sliderQuerySelector: '*[data-controller="theme-slider"]',
        sliderListElements: [],
        sliderListQuerySelector: '*[data-controller="theme-slider-slides"]',
        sliderPreviousButtonElements: [],
        sliderPreviousButtonuerySelector: '*[data-controller="theme-slider-previous"]',
        sliderNextButtonElements: [],
        sliderNextButtonuerySelector: '*[data-controller="theme-slider-next"]',
        tinySliderOptions: {},
        autoInitialize: true,
    });
});

sliderElements [Array] – provide the wrapper element(s) of your theme sliders (optional)
sliderQuerySelector [String] – provide a query-selector to select theme slider wrapper elements. (optional, default: *[data-controller="theme-slider"])
sliderListElements [Array] – provide the list (<ul>) element(s) of your theme sliders (optional)
sliderListQuerySelector [String] – provide a query-selector to select theme slider list elements. (optional, default: *[data-controller="theme-slider-slides"])
sliderPreviousButtonElements [Array] – provide the previous button element(s) of your theme sliders (optional)
sliderPreviousButtonuerySelector [String] – provide a query-selector to select theme slider previous button elements. (optional, default: *[data-controller="theme-slider-previous"])
sliderNextButtonElements [Array] – provide the next button element(s) of your theme sliders (optional)
sliderNextButtonuerySelector [String] – provide a query-selector to select theme slider next button elements. (optional, default: *[data-controller="theme-slider-next"])
tinySliderOptions [Object] – provide your custom tiny-slider options (optional, default: {})
autoInitialize [Boolean] – configure if the slider should be initialized on method call (true) or if you want to manually call the slider.initialize () method (false)

If you do provide the options.[...]Elements the options.[...]QuerySelector option gets ignored. If you do not provide any options.[...]Elements always the options.[...]QuerySelector is used!

Default tiny-slider configuration#

If you pass the tinySliderOptions configuration property, you overwrite or extend our default tiny-slider configuration which looks like the following:

{
    container: themeSliderListElement,
    controls: false,
    nav: false,
    axis: 'horizontal',
    loop: false,
    swipeAngle: false,
    arrowKeys: false, //prevent slide with arrow-keys
    touch: true,
    mouseDrag: false,
    speed: 350,
    slideBy: 'page',
    gutter: 8,
    fixedWidth: 120, //Needs to be set, to make page-slide possible
    responsive: {
        600: {
            fixedWidth: 160,
        }
    },
},

You can implement your own slider-logic and just use the HTML-snippet with styled elements above. But therefore you need to take care of accessibility and cross-browser functionality by your own! Therefore the aria-hidden attributes should be set and the tab-navigation should work as expected.

Theme slider w/o JavaScript#

Besides the normal slider version we also offer a version which works without JavaScript. To display the theme slider without JavaScript you have to add the class .theme-slider-nojs to the theme slider element. When there is also no data-controller="theme-slider" added to the element, the slider will work with the no-js variant even when there is JavaScript available on the client. This behavior will be shown in the example below.

w/o JavaScript#

preview<html>

<div class="theme-slider theme-slider-nojs">
    <ul class="theme-slider-slides" data-controller="theme-slider-slides">
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide theme-slider-slide-active">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                        with more text and new line</div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
    </ul>
</div>

ThemesliderWithoutJavaScript

To only use the no-js variant as a fallback, when there is no JavaScript available on the client, you have to add additionally to the .theme-slider-nojs class the data-controller="theme-slider" to the theme slider element. Besides that you have to add the buttons like in the example above. In that case our JavaScript plugin will automatically remove the class .theme-slider-nojs and will show the buttons to slide through the theme slider.

w/o JavaScript as a fallback#

preview<html>JS

<div class="theme-slider theme-slider-nojs" data-controller="theme-slider">
    <button class="btn btn-slider theme-slider-btn theme-slider-btn-prev"
        data-controller="theme-slider-previous">
        <svg class="icon icon-2" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
            <title>Previous Slide</title>
            <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-left">
            </use>
        </svg>
    </button>
    <button class="btn btn-slider theme-slider-btn theme-slider-btn-next"
        data-controller="theme-slider-next">
        <svg class="icon icon-2" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
            <title>Next Slide</title>
            <use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-right">
            </use>
        </svg>
    </button>
    <ul class="theme-slider-slides" data-controller="theme-slider-slides">
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide theme-slider-slide-active">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                        with more text and new line</div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
        <li class="theme-slider-slide ">
            <a href="#" class="card theme-slider-card">
                <img is="rnd-img" src="../../../_assets/images/examples/Apfel-Karamell-Kuchen.jpg"
                    alt="Nice cake" class="card-img-top theme-slider-card-img-top"
                    folder="../../../_assets/images/examples"
                    images="Apfel-Karamell-Kuchen.jpg,Apfel-Lebkuchentorte.jpg,Apfel-Quarkkuchen-mit-Sultaninen.jpg,Aprikosen-Frischkaesetorte.jpg,Aprikosengalette-mit-Rosmarin.jpg,Backen_CloseUp_v01_USAR.jpg,Backen_CloseUp_v14_USAR.jpg,Backen_Ostern_CloseUp_v02_USAR.jpg,Backen_Ostern_CloseUp_v07_USAR.jpg,Backen_Stibi_POS_WT1644_IFLA.jpg,Backen_Weihnachten_CloseUp_v02_USAR.jpg,Backen_Weihnachten_CloseUp_v14_USAR.jpg,Backen_Weihnachten_CloseUp_v16_USAR.jpg,Backen_Weihnachten_Collect_v01_USAR.jpg,Backen_Weihnachten_Recipe_Mini_Apel_Mini_Cinnamon_Cake_v02_USAR.jpg,Bellini-Torte.jpg,Birnen-Haselnuss-Streuselkuchen-mit-Cranberrys.jpg,Crepestorte.jpg,Erdbeer-Quark-Torte.jpg,Espresso-Schuettelkuchen.jpg,Espressotorte-mit-Himbeeren.jpg,Frische-Quarktorte-mit-Smoothie-Guss.jpg,Gefrorene-Brombeercharlotte.jpg,Himbeer-Eis-Guglhupf.jpg,Himbeer-Ombrecake.jpg,Japanischer-Cheesecake-mit-Erdbeeren.jpg,Johannisbeer-Pull-apart-Kuchen.jpg,Kaesekuchen-mit-Brombeeren.jpg,Kirsch-Punsch-Guglhupf.jpg,Kuhflecken-Kaesekuchen.jpg,Mangokuchen-mit-Mojito-Guss.jpg,Marzipan-Kirsch-Streifen.jpg,Orangentarte-mit-Kumquats.jpg,Pfirsichtarte-mit-Quarkcreme.jpg,Pflaumen-Pekan-Tarte.jpg,Ricottatarte-mit-Johannisbeeren.jpg,Rote-Beete-Schoko-Kuchen-mit-Schokoganache.jpg,Schoko-Espresso-Tarte.jpg,Schoko-Nougat-Guglhupf.jpg,Schokoladenkuchen-mit-Mohnsahne-und-Mango.jpg,Stollenrauten.jpg,Streusel-Kaesekuchen-mit-Blaubeeren.jpg,Walnuss-Blondies.jpg,veganer-Cheesecake-mit-Himbeeren.jpg" />
                <div class="card-body theme-slider-card-body">
                    <div class="card-subtitle theme-slider-card-title" title="Card subtitle">Title
                    </div>
                    <div class="card-subhead theme-slider-card-subhead">Subhead</div>
                </div>
            </a>
        </li>
    </ul>
</div>

import "./cakeDOM";
import {
    tns
} from "tiny-slider/src/tiny-slider";

if (typeof window.cake !== "object") {
    window.cake = {};
}

const defaultOptions = {
    sliderElements: [],
    sliderQuerySelector: '*[data-controller="theme-slider"]',
    sliderListElements: [],
    sliderListQuerySelector: '*[data-controller="theme-slider-slides"]',
    sliderPreviousButtonElements: [],
    sliderPreviousButtonuerySelector: '*[data-controller="theme-slider-previous"]',
    sliderNextButtonElements: [],
    sliderNextButtonuerySelector: '*[data-controller="theme-slider-next"]',
    tinySliderOptions: {},
    autoInitialize: true,
};

class themeSlider {

    constructor(
        sliderConfig = {},
        autoInitialize = true,
        sliderWrapperEl,
        sliderListEl,
        previousButtonEl,
        nextButtonEl,
    ) {
        //Chek if SliderWrapperEl exists
        this.sliderWrapperEl = sliderWrapperEl;
        if (!this.sliderWrapperEl) {
            console.warn("Theme-Slider:", "sliderWrapperEl is no valid HTMLElement",
                sliderWrapperEl);
        }

        //Check if all the other elements has to be set
        this.sliderListEl = sliderListEl;
        this.previousButtonEl = previousButtonEl;
        this.nextButtonEl = nextButtonEl;

        //Set Slider-Config and overwrite defaults
        this.sliderConfig = sliderConfig;

        //Some default Class-Attributes
        this.slider = null;
        this.timeouts = [];
        this.garbageCollection = {};

        //Initialize Slider, if set up in config
        if (autoInitialize) {
            this.initialize();
        }
    }

    initialize() {
        //Only initialize once
        if (this.slider) {
            return;
        }

        //Remove no-js behaviour
        this.garbageCollection.sliderNoJsAvailable = this.sliderWrapperEl.classList.contains(
            'theme-slider-nojs');
        if (this.garbageCollection.sliderNoJsAvailable) {
            this.sliderWrapperEl.classList.remove('theme-slider-nojs');
        }
        //Set overflow:hidden on wrapper element, so that tiny-slider does work
        this.garbageCollection.sliderWrapperElStyleOverflow = this.sliderWrapperEl.style
            .overflow;
        this.sliderWrapperEl.style.overflow = "hidden";

        //Initialize Slider
        this.slider = tns(this.sliderConfig);

        //**                     */
        //**    EVENT-LISTENERS  */
        //**                     */

        //Add Resize Event listener
        window.resizeThrottled(() => {
            this.refreshSlider();
        }, 300);


        //Add Click Event listener
        const isDefaultSliding = this.sliderConfig.slideBy !== "page" || this.sliderConfig
            .fixedWidth;
        this.garbageCollection.previousButtonClickEvent = () => {
            if (isDefaultSliding) {
                this.slider.goTo('prev');
            } else {
                this.slider.goTo(this.calculateNewIndex("prev"));
            }
        };
        this.previousButtonEl.addEventListener('click', this.garbageCollection
            .previousButtonClickEvent);
        this.garbageCollection.nextButtonClickEvent = () => {
            if (isDefaultSliding) {
                this.slider.goTo('next');
            } else {
                this.slider.goTo(this.calculateNewIndex("next"));
            }
        };
        this.nextButtonEl.addEventListener('click', this.garbageCollection
        .nextButtonClickEvent);


        this.slider.events.on('transitionEnd', (sliderInfo) => {
            //Update Button visibility
            setTimeout(() => this.updateButtonOpacity(), 50);
        });


        //Initialize Slider
        this.refreshSlider(true);
    }

    terminate() {
        //Only terminate once
        if (!this.slider) {
            return;
        }

        //Remove button events
        this.previousButtonEl.removeEventListener("click", this.garbageCollection
            .previousButtonClickEvent);
        this.nextButtonEl.removeEventListener("click", this.garbageCollection
            .nextButtonClickEvent);

        //Hide buttons
        this.showButton(this.previousButtonEl, false);
        this.showButton(this.nextButtonEl, false);

        //Remove slider-item focus events
        this.garbageCollection.sliderItemFocusEvents.forEach(sliderItemFocusEvent => {
            sliderItemFocusEvent.el.removeEventListener("focus", sliderItemFocusEvent
                .event);
        });

        //Add no-js behaviour, if it was available before
        if (this.garbageCollection.sliderNoJsAvailable) {
            this.sliderWrapperEl.classList.add('theme-slider-nojs');
        }
        //Reverse overflow on wrapper element, so that it has the previous status
        this.sliderWrapperEl.style.overflow = this.garbageCollection
            .sliderWrapperElStyleOverflow;

        //Deconstruct slider
        this.slider.destroy();
        this.slider = null;

        //Delte garbage-collection tmp-variable
        this.garbageCollection = {};
    }

    //Detects the actual status of the slider
    //returns: start | middle | end | disabled
    get sliderStatus() {
        const sliderInfo = this.info;

        //Check if slider is disabled
        if (!sliderInfo.isOn) {
            return "disabled";
        }

        //Check if all slider-items are visible at once
        if (sliderInfo.displayIndex === 1 && sliderInfo.slideCountNew - sliderInfo.slideBy <=
            0) {
            return "disabled";
        }

        //Check if there are not all items visible
        if (sliderInfo.index + sliderInfo.slideBy >= sliderInfo.slideCountNew) {
            return "end";
        }

        //calculate bounding boxes of the slider and ul element
        const themeSliderRect = this.sliderWrapperEl.getBoundingClientRect();
        const themeSliderRectWidth = this.sliderWrapperEl.scrollWidth;
        const sliderRect = this.sliderListEl.getBoundingClientRect();
        const sliderRectWidth = this.sliderListEl.scrollWidth;
        const lastItemRect = sliderInfo.slideItems[sliderInfo.slideItems.length - 1]
            .getBoundingClientRect();

        //Check if on index = 1 and last item is visible => disabled
        if (sliderInfo.displayIndex === 1 && lastItemRect.right <= themeSliderRect.right) {
            return "disabled";
        }

        //Check if last item.right is the same value than themeSliderRect.right
        if (Math.round(lastItemRect.right) <= Math.round(themeSliderRect.right)) {
            return "end";
        }

        //Check if slider is on end (if last item is fully visible in viewport)
        if ((sliderRect.x || sliderRect.left) + sliderRectWidth <= (themeSliderRect.x ||
                themeSliderRect.left) + themeSliderRectWidth + this.sliderConfig.gutter) {
            return "end";
        }

        //Check if slider is disabled (last item in puffer at the end)
        let positionDiff = ((sliderRect.x || sliderRect.left) + sliderRectWidth) - ((
            themeSliderRect.x || themeSliderRect.left) + themeSliderRectWidth);
        if (positionDiff < this.sliderConfig.gutter + 1 && positionDiff > 0) {
            return "disabled";
        }

        //Check if slider is on start (first item as display-index)
        if (sliderInfo.displayIndex === 1) {
            return "start";
        }

        //Otherwise the slider is in middle
        return "middle";
    }

    get info() {
        return this.slider.getInfo();
    }

    //Find out somehow, how many items are fully visible in the slider
    get itemsVisiblePerPage() {
        const sliderItems = this.info.slideItems;
        const sliderContainerRect = this.sliderWrapperEl.getBoundingClientRect();
        let visibleOnOnePage = 0;
        for (let sliderItem of sliderItems) {
            const sliderItemRect = sliderItem.getBoundingClientRect();
            if (sliderItemRect.left >= sliderContainerRect.left && sliderItemRect.right <=
                sliderContainerRect.right) {
                visibleOnOnePage++;
            }
        }
        return visibleOnOnePage;
    }

    calculateNewIndex(direction = "next") {
        const sliderItemCount = this.info.slideCountNew;
        const visibleOnOnePage = this.itemsVisiblePerPage;

        let newIndex = 0;
        if (direction === "next") {
            newIndex = this.info.index + visibleOnOnePage;
            if (newIndex >= sliderItemCount - visibleOnOnePage) {
                newIndex = sliderItemCount - visibleOnOnePage + 1;
            }
        } else {
            newIndex = this.info.index - visibleOnOnePage;
            if (newIndex < 0) {
                newIndex = "first";
            }
        }
        return newIndex;
    }

    //Hide and Show the Previos and Next Buttons
    showButton(buttonEl, show = true, init = false) {
        if (show) {
            if (buttonEl.style.opacity != 1 || init) {
                if (this.timeouts.length > 0) {
                    clearTimeout(this.timeouts.shift());
                }
                buttonEl.disabled = false;
                buttonEl.style.display = 'block';
                setTimeout(() => {
                    buttonEl.style.opacity = 1;
                }, 10);
                buttonEl.setAttribute('aria-hidden', 'false');
            }
        } else {
            if (buttonEl.style.opacity != 0 || init) {
                buttonEl.style.opacity = 0;
                buttonEl.setAttribute('aria-hidden', 'true');
                this.timeouts.push(setTimeout((buttonEl) => {
                    buttonEl.disabled = true;
                    buttonEl.style.display = 'none';
                }, this.sliderConfig, buttonEl));
            }
        }
    };

    //Decide which button should hide and show
    updateButtonOpacity(init = false) {
        switch (this.sliderStatus) {
            case "start":
                this.showButton(this.previousButtonEl, false, init);
                this.showButton(this.nextButtonEl, true, init);
                break;
            case "end":
                this.showButton(this.previousButtonEl, true, init);
                this.showButton(this.nextButtonEl, false, init);
                break;
            case "middle":
                this.showButton(this.previousButtonEl, true, init);
                this.showButton(this.nextButtonEl, true, init);
                break;
            case "disabled":
                this.showButton(this.previousButtonEl, false, init);
                this.showButton(this.nextButtonEl, false, init);
                break;
        }
    }

    //Refresh Slider on Resize and Initially to correct position changes
    refreshSlider(init = false) {
        if (!this.slider) {
            return;
        }
        //Update Slider
        this.slider.refresh();

        if (init) {
            this.initializeSliderFocusListener();
        }

        //Update Buttons
        this.updateButtonOpacity(init);
    };

    //Initialize Slider-Focus listener
    initializeSliderFocusListener() {
        this.garbageCollection.sliderItemFocusEvents = [];
        const sliderInfo = this.info;
        const sliderElementCount = sliderInfo.slideItems.length;
        for (let i = 0; i < sliderElementCount; i++) {
            const sliderItem = sliderInfo.slideItems[i];
            const focusEvent = (e) => {
                const sliderInfo = this.info;

                let index = sliderInfo.index;
                if (i <= sliderInfo.index) {
                    //prev
                    index = i - sliderInfo.slideBy + 1
                } else if (i === (sliderInfo.slideBy + sliderInfo.index) - 1) {
                    //next
                    index = i - 1;
                }

                index = index < 0 ? 0 : index;
                index = index > sliderElementCount - sliderInfo.slideBy ?
                    sliderElementCount - sliderInfo.slideBy : index;
                if (index !== sliderInfo.index) {
                    this.slider.goTo(index);
                }
            };
            this.garbageCollection.sliderItemFocusEvents.push({
                el: (sliderItem.firstElementChild || sliderItem.firstChild),
                event: focusEvent
            });
            (sliderItem.firstElementChild || sliderItem.firstChild).addEventListener("focus",
                focusEvent);
        }
    }

}

window.cake.themeSlider = (options = defaultOptions) => {
    options = {
        ...defaultOptions,
        ...options
    };
    let sliders = [];
    const themeSliderElements = window.cake.utils.getElements(options.sliderElements, options
        .sliderQuerySelector);
    for (const [idx, themeSliderElement] of themeSliderElements.entries()) {
        const themeSliderListElement = window.cake.utils.getElement(options.sliderListElements[
            idx], options.sliderListQuerySelector, themeSliderElement);
        const themeSliderPreviousButtonElement = window.cake.utils.getElement(options
            .sliderPreviousButtonElements[idx], options.sliderPreviousButtonuerySelector,
            themeSliderElement);
        const sliderNextButtonElementElement = window.cake.utils.getElement(options
            .sliderNextButtonElements[idx], options.sliderNextButtonuerySelector,
            themeSliderElement);

        sliders.push(
            new themeSlider({
                    container: themeSliderListElement,
                    controls: false,
                    nav: false,
                    axis: 'horizontal',
                    loop: false,
                    swipeAngle: false,
                    arrowKeys: false, //prevent slide with arrow-keys
                    touch: true,
                    mouseDrag: false,
                    speed: 350,
                    slideBy: 'page',
                    gutter: 8,
                    fixedWidth: 120, //Needs to be set, to make page-slide possible
                    responsive: {
                        600: {
                            fixedWidth: 160,
                        }
                    },
                    // edgePadding: 8,
                    ...options.tinySliderOptions,
                },
                options.autoInitialize,
                themeSliderElement,
                themeSliderListElement,
                themeSliderPreviousButtonElement,
                sliderNextButtonElementElement
            )
        );
    }
    return sliders;
};

export default window.cake.themeSlider;

ThemesliderWithFallback

Change log#

6.2.0 - 2021-08-19#

Added#

Doc: "Theme-Slider" | added javaScript file content as "JS" tab

5.0.0 - 2021-01-28#

Changed#

JS, Doc: "Theme-Slider" | updated javascript to provide options object for better integration of CAKE
HTML, Doc: "Theme-Slider" | refactor all data-toggle properties to data-controller for unification of all CAKE components
SCSS: "Theme-Slider" | added the variables $theme-slider-width and $theme-slider-width-md-up to specify the width of theme-slider
NPM: "Theme-Slider" | updated the dependency tiny-slider from version 2.9.1 to 2.9.3

3.10.0 - 2020-02-27#

Added#

SCSS: "Theme-Slider" | The card component has a updated "card-body" padding. The theme slider inherit this value. So we have to set the previos value of .5rem explicitly. The padding can be modified with the new $theme-slider-card-body-padding variable.

3.8.0 - 2019-11-07#

Changed#

CSS: "Theme-Slider" | updated line-height of theme-slider headlines to be 120%
CSS: "Theme-Slider" | updated spacing between subheadline and headline to be 0.25rem
SCSS: "Theme-Slider" | Use mixins for border

Fixed#

SCSS: "Theme-Slider" | Added !default to $theme-slider-outer-gutter, $theme-slider-active-color, $theme-slider-active-card-body-bg, $theme-slider-active-hover-color, $theme-slider-card-inner-border-radius, $theme-slider-subhead-font-weight, $theme-slider-title-font-weight in _variables.scss file.
CSS: "Theme Slider" | updated title font-size to 1rem on MD and 1.125rem from LG

3.7.0 - 2019-09-30#

Changed#

JS: "Theme-Slider" | updated tiny-slider default config to set fixedWith also on breakpoint, if defined