Line Visualizer 2.0

Basis Line

Aussenfarben

 

Felgen

 

Polsterfarbe

 

Interieurleisten

 

Module description

Lorem ipsum...

Events

Alle verfügbaren Events sind an das Modul data-module="line-visualizer" gebunden.

  • m01:afterInit
  • m01:changeFeature (featuretype, featureid)
    z.B. featureype = "color", featureid = "COLOR3"

HTML

<article class="line-visualizer container" data-module="line-visualizer">
  <h1>Basis Line</h1>

  <div class="tabs" data-role="tabs">

    <ul class="tab-bar">
      <li><a href="#" class="tab-panel">Exterior</a></li>
      <li><a href="#" class="tab-panel">Interior</a></li>
    </ul>

    <div class="tab">
      <div class="tab-content">

        <div class="slider-container slider" data-role="slider">
          <div class="slides">
            <img src="assets/360/BMW_5er_01.jpg" alt="">
            <img src="assets/360/BMW_5er_10.jpg" alt="">
            <img src="assets/360/BMW_5er_20.jpg" alt="">
          </div>
        </div>

        <div class="view360-container"></div>

        <div class="button-container">
          <button type="button" class="btn-360" data-bind="show360">360</button>
        </div>

        <div class="feature-chosen">
          <p>
            <span data-chosenfeature="color"></span>
            <span data-chosenfeature="rim"></span>
          </p>
        </div>

        <div class="feature-group" data-featuregroup="exterior">
          <div>
            <h2>Aussenfarben</h2>
            <div class="feature-list drag-scroller" data-featurelist="color" data-default="DT_Sicke_A83_Glaciersilber">
              <ul>
                <li data-feature-id="DT_Sicke_300_Alpinweiß" data-feature-name="300 Alpinweiß">
                  <img src="assets/exterior/colors/DT_Sicke_300_Alpinweiß.jpg">
                </li>
                <li data-feature-id="DT_Sicke_475_Saphirschwarz" data-feature-name="475 Saphirschwarz">
                  <img src="assets/exterior/colors/DT_Sicke_475_Saphirschwarz.jpg">
                </li>
                <li data-feature-id="DT_Sicke_668_Schwarz" data-feature-name="668 Schwarz">
                  <img src="assets/exterior/colors/DT_Sicke_668_Schwarz.jpg">
                </li>
                <li data-feature-id="DT_Sicke_A72_Kaschmirsilber" data-feature-name="A72 Kaschmirsilber">
                  <img src="assets/exterior/colors/DT_Sicke_A72_Kaschmirsilber.jpg">
                </li>
                <li data-feature-id="DT_Sicke_A83_Glaciersilber" data-feature-name="A83 Glaciersilber">
                  <img src="assets/exterior/colors/DT_Sicke_A83_Glaciersilber.jpg">
                </li>
                <li data-feature-id="DT_Sicke_A89_Imperialblau" data-feature-name="A89 Imperialblau">
                  <img src="assets/exterior/colors/DT_Sicke_A89_Imperialblau.jpg">
                </li>
                <li data-feature-id="DT_Sicke_A96_Mineralweiß" data-feature-name="A96 Mineralweiß">
                  <img src="assets/exterior/colors/DT_Sicke_A96_Mineralweiß.jpg">
                </li>
                <li data-feature-id="DT_Sicke_B65_Jatoba" data-feature-name="B65 Jatoba">
                  <img src="assets/exterior/colors/DT_Sicke_B65_Jatoba.jpg">
                </li>
                <li data-feature-id="DT_Sicke_WC26_Magellangrau_met" data-feature-name="WC26 Magellangrau metallic">
                  <img src="assets/exterior/colors/DT_Sicke_WC26_Magellangrau_met.jpg">
                </li>
                <li data-feature-id="DT_Sicke_WC27_Arktikgrau_met" data-feature-name="WC27 Arktikgrau metallic">
                  <img src="assets/exterior/colors/DT_Sicke_WC27_Arktikgrau_met.jpg">
                </li>
              </ul>
              <span class="active-handle">&nbsp;</span>
            </div>
          </div>

          <div>
            <h2>Felgen</h2>
            <div class="feature-list drag-scroller" data-featurelist="rim" data-default="A0145095">
              <ul>
                <li data-feature-id="A0145080" data-feature-name="A0145080"><img src="assets/exterior/rims/A0145080.jpg" alt=""></li>
                <li data-feature-id="A0145095" data-feature-name="A0145095"><img src="assets/exterior/rims/A0145095.jpg" alt=""></li>
                <li data-feature-id="A0145106" data-feature-name="A0145106"><img src="assets/exterior/rims/A0145106.jpg" alt=""></li>
                <li data-feature-id="A0145107" data-feature-name="A0145107"><img src="assets/exterior/rims/A0145107.jpg" alt=""></li>
                <li data-feature-id="A0145581" data-feature-name="A0145581"><img src="assets/exterior/rims/A0145581.jpg" alt=""></li>
                <li data-feature-id="A0146314" data-feature-name="A0146314"><img src="assets/exterior/rims/A0146314.jpg" alt=""></li>
                <li data-feature-id="A0146317" data-feature-name="A0146317"><img src="assets/exterior/rims/A0146317.jpg" alt=""></li>
                <li data-feature-id="A0167501" data-feature-name="A0167501"><img src="assets/exterior/rims/A0167501.jpg" alt=""></li>
                <li data-feature-id="A0167502" data-feature-name="A0167502"><img src="assets/exterior/rims/A0167502.jpg" alt=""></li>
                <li data-feature-id="A0167506" data-feature-name="A0167506"><img src="assets/exterior/rims/A0167506.jpg" alt=""></li>
              </ul>
              <span class="active-handle">&nbsp;</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="tab">
      <div class="tab-content">

        <div class="slider-container">
          <img src="assets/interior/BMW_5er_interior_static.jpg" alt="">
        </div>

        <div class="cube-container"></div>
        <div class="button-container">
          <button type="button" class="btn-360" data-bind="showCube">360</button>
        </div>

        <div class="feature-chosen">
          <p>
            <span data-chosenfeature="upholstery"></span>
            <span data-chosenfeature="trim"></span>
          </p>
        </div>

        <div class="feature-group" data-featuregroup="interior">
          <div>
            <h2>Polsterfarbe</h2>
              <div class="feature-list drag-scroller" data-featurelist="upholstery" data-default="DT_LCCY_Komfort_Dakota_canberrabeige_Kontrastnaht">
              <ul>
                <li data-feature-id="DT_LCCY_Komfort_Dakota_canberrabeige_Kontrastnaht" data-feature-name="DT_LCCY_Komfort_Dakota_canberrabeige_Kontrastnaht">
                  <img src="assets/interior/upholstery/DT_LCCY_Komfort_Dakota_canberrabeige_Kontrastnaht.jpg" alt="">
                </li>
                <li data-feature-id="DT_LCMY_Komfort_Dakota_Mokka_Kontrastnaht" data-feature-name="DT_LCMY_Komfort_Dakota_Mokka_Kontrastnaht">
                  <img src="assets/interior/upholstery/DT_LCMY_Komfort_Dakota_Mokka_Kontrastnaht.jpg" alt="">
                </li>
                <li data-feature-id="DT_LCRI_Komfort_Dakota_Cognac_Kontrastnaht" data-feature-name="DT_LCRI_Komfort_Dakota_Cognac_Kontrastnaht">
                  <img src="assets/interior/upholstery/DT_LCRI_Komfort_Dakota_Cognac_Kontrastnaht.jpg" alt="">
                </li>
                <li data-feature-id="DT_NAMY_Komfort_Nappa_Mokka_Keder_Kontrastnaht" data-feature-name="DT_NAMY_Komfort_Nappa_Mokka_Keder_Kontrastnaht">
                  <img src="assets/interior/upholstery/DT_NAMY_Komfort_Nappa_Mokka_Keder_Kontrastnaht.jpg" alt="">
                </li>
                <li data-feature-id="DT_ZBFQ_Merino_Feinnarbe_Fionarot_Flechtstruktur_Keder_schwarz" data-feature-name="DT_ZBFQ_Merino_Feinnarbe_Fionarot_Flechtstruktur_Keder_schwarz">
                  <img src="assets/interior/upholstery/DT_ZBFQ_Merino_Feinnarbe_Fionarot_Flechtstruktur_Keder_schwarz.jpg" alt="">
                </li>
              </ul>
              <span class="active-handle">&nbsp;</span>
            </div>
          </div>

          <div>
            <h2>Interieurleisten</h2>
            <div class="feature-list drag-scroller" data-featurelist="trim" data-default="DT_4AS_Pappel_Maser_grau">
              <ul>
                <li data-feature-id="DT_4AS_Pappel_Maser_grau" data-feature-name="DT_4AS_Pappel_Maser_grau">
                  <img src="assets/interior/trim/DT_4AS_Pappel_Maser_grau.jpg" alt="">
                </li>
                <li data-feature-id="DT_4AY_Edelholzausfuehrung Amerikanische_Eiche_hell_mit_Metallintarsie" data-feature-name="DT_4AY_Edelholzausfuehrung Amerikanische_Eiche_hell_mit_Metallintarsie">
                  <img src="assets/interior/trim/DT_4AY_Edelholzausfuehrung Amerikanische_Eiche_hell_mit_Metallintarsie.jpg" alt="">
                </li>
                <li data-feature-id="DT_4LM_Fineline schwarz mit Metalleffekt" data-feature-name="DT_4LM_Fineline schwarz mit Metalleffekt">
                  <img src="assets/interior/trim/DT_4LM_Fineline schwarz mit Metalleffekt.jpg" alt="">
                </li>
                <li data-feature-id="DT_XE7_Pianolack_schwarz" data-feature-name="DT_XE7_Pianolack_schwarz">
                  <img src="assets/interior/trim/DT_XE7_Pianolack_schwarz.jpg" alt="">
                </li>
              </ul>
              <span class="active-handle">&nbsp;</span>
            </div>
          </div>
        </div>

      </div>
    </div>  

  </div>

</article>

<script src="/assets/js/app.js"></script>
<script src="js/initModule.js"></script>