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
  • …
 
<html lang="en" class="js">
<head>
    <meta charset="utf-8">
    <title>vices</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
​
<style>
     * {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .carousel .control-dots {
        position: absolute;
        bottom: 0;
        margin: 10px 0;
        padding: 0;
        text-align: center;
        width: 100%;
        z-index: 1;
    }
     .carousel .control-dots {
         position: absolute;
         bottom: 0;
         margin: 10px 0;
         padding: 0;
         text-align: center;
         width: 100%;
         z-index: 1;
     }
     .slick-animated-dots {
         position: absolute;
         overflow: hidden;
         left: 0;
         top: 30px;
         list-style: none;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: row;
         -ms-flex-wrap: none;
         /* flex-flow: row nowrap; */
         -ms-flex-pack: center;
         justify-content: center;
         -ms-flex-align: center;
         align-items: center;
         text-align: center;
         padding: 0;
         margin: 0;
         width: 100%;
     }
     .slick-animated-dots li {
         position: relative;
         display: -ms-inline-flexbox;
         display: inline-flex;
         -ms-flex-direction: row;
         -ms-flex-wrap: none;
         flex-flow: row nowrap;
         -ms-flex-pack: center;
         justify-content: center;
         -ms-flex-align: center;
         align-items: center;
         height: 10px;
         width: 36px;
         margin: 0 3px;
         padding: 0;
         cursor: pointer;
     }
     .slick-animated-dots li button {
         box-sizing: border-box;
         margin: 0 auto;
         border: 1px solid rgba(255,255,255,0.6);
         border-radius: 4px;
         background: transparent;
         display: block;
         height: 6px;
         width: 32px;
         outline: none;
         line-height: 0px;
         font-size: 0px;
         color: transparent;
         cursor: pointer;
         opacity: 1;
         transition: background 200ms linear,border-color 200ms linear;
         overflow: hidden;
     }
​
​
     .slick-animated-dots li.slick-active button {
         background: transparent;
         opacity: 1;
     }
​
​
</style>
</head>
<body class="f20 f20v0 ready" style="background: red;height:100vh;width: 100vw">
​
​
<ul class="control-dots slick-animated-dots cwidth init">
    <li class="slick-active" value="0" role="button">
        <button type="button" aria-pressed="false" role="tab" class=""><span></span></button>
    </li>
    <li class="" value="1" role="button">
        <button type="button" aria-pressed="false" role="tab" class=""><span></span></button>
    </li>
    <li class="" value="2" role="button">
        <button type="button" aria-pressed="false" role="tab" class=""><span></span></button>
    </li>
</ul>
​
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers