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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>USA Map with carousel</title>
  <style>
    .city__locations-slide {background-color: lightgrey; padding: 10px; margin: 10px;}
    .city__locations-prev-button {position: absolute;left: 0;top: 30%;width: 20px;height: 20px;z-index: 111;}
    .city__locations-next-button {position: absolute;right: 0;top: 30%;width: 20px;height: 20px;z-index: 111;}
  </style>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
​
</head>
<body>
<div class="container">
  <div class="row">
    <div class="columns small-24">
      <div id="map" class="" style="position: relative; height: 100%; width: 100%; background-color: rgb(255, 255, 255, 1);"></div>
      <div id="map-location" class="push--40 city__locations">
        <div class="city__locations-slide">
          <div class="city__locations__locations-slide-inner">
            <p>Madison, WI</p>
          </div>
        </div>
        <div class="city__locations-slide">
          <div class="city__locations__locations-slide-inner">
            <p>Columbus, OH</p>
          </div>
        </div>
        <div class="city__locations-slide">
          <div class="city__locations__locations-slide-inner">
            <p>Gainesville, FL</p>
          </div>
        </div>
        <div class="city__locations-slide">
          <div class="city__locations__locations-slide-inner">
            <p>Chestnut Hill, MA</p>
          </div>
        </div>
        <div class="city__locations-slide">
          <div class="city__locations__locations-slide-inner">
            <p>Chestnut Hill2, MA</p>
          </div>
        </div>
        <div class="city__locations-slide">
          <div class="city__locations__locations-slide-inner">
            <p>Chestnut Hill3, MA</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="glow" class="glow">
</div>
  
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.usa.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"/></script>
​
​
  
  
​
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
MikeUIDevpro
0viewers