Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
​
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
    </head>
<body>
<div id="108" class="carousel slide carousel-108" data-ride="carousel" data-interval="false">
  <div class="carousel-inner" role="listbox">
    <div class="scenarioOne item active">
      <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
          <span>Szenario01</span>
    </div>
    <div class="scenarioTwo item">
      <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
          <span>Szenario02</span>   
    </div>
    <div class="scenarioThree item">
      <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
          <span>Szenario03</span>
    </div>
      <div class="scenarioFour item">
      <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
                          <span>Szenario04</span>
    </div>
      <div class="scenarioFive item">
      <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
                <span>Szenario05</span>
    </div>
  </div>
</div>
<div id="thumbcarousel-108" class="carousel slide thumbcarousel-108 mootools-noconflict" data-interval="false">
    <div class="carousel-inner container">
        <div class="item active">
            <div data-target="#108" data-slide-to="0" class="thumb active col-md-6" data-item="thumb-0">
                <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>                                  
                <div class="thumblabel hidden-xs">Szenario 01</div>
            </div>
            <div data-target="#108" data-slide-to="1" class="thumb col-md-6" data-item="thumb-1">
                <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
                <div class="thumblabel hidden-xs">Szenario 02</div>
            </div>
            <div data-target="#108" data-slide-to="2" class="thumb col-md-6" data-item="thumb-2">
                <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
                <div class="thumblabel hidden-xs">Szenario 03</div>
            </div>
            <div data-target="#108" data-slide-to="3" class="thumb col-md-6" data-item="thumb-3">
                <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
                <div class="thumblabel hidden-xs">Szenario 04</div>
            </div>
        </div>
        <div class="item">
            <div data-target="#108" data-slide-to="4" class="thumb col-md-6" data-item="thumb-4">
                <svg viewbox="0 0 85 98" xmlns="http://www.w3.org/2000/svg">
                    <title>Group</title>
                    <g stroke="#3A4136" fill="none" fill-rule="evenodd">
                        <path d="M1 25.475l41.43 24.01L83.86 25.56 42.513 1.47 1 25.474z"></path>
                        <path d="M42.43 97.403v-47.92L1 25.475v47.84l41.43 24.088zM83.857 73.314V25.56L42.43 49.48v47.923l41.427-24.09zM9.23 30.236l33.2 19.24 33.2-19.172-33.133-19.308L9.23 30.236z"></path>
                        <path d="M42.43 49.475l-15.603-9.042-17.597-10.2v38.338l33.2 19.306v-38.4zM75.63 68.57V30.305L42.43 49.47v38.407l33.2-19.306z"></path>
                        <path d="M75.63 68.7V30.304l-33.2 19.142v38.43L75.63 68.7z"></path>
                    </g>
                </svg>
                <div class="thumblabel hidden-xs">Szenario05</div>
            </div>
        </div>
    </div>
    <!-- /carousel-inner -->
    <a class="carousel-control left" href="#thumbcarousel-108" role="button" data-slide="">
    <span class="fa fa-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#thumbcarousel-108" role="button" data-slide="">
    <span class="fa fa-chevron-right"></span>
    </a>
</div>
<!-- /thumbcarousel -->
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
janpro
0viewers