title: add carousel in jquery mobile with google map
body: <p>I wanted to create a page on jquery mobile with google map.</p>
  
  <p>something like this:
  <a href="http://jsfiddle.net/Palestinian/N6PAh/" rel="nofollow">Reference from Omar</a></p>
  
  <p>but with a carousel below the page where you can scroll and choose the pins from.</p>
  
  <p>I tried using <a href="http://owlgraphic.com/owlcarousel/" rel="nofollow">owl carousel</a> with the demo codes, css and html but it doesn't seem to be working, or rather, it doesn't display on the screen. </p>
  
  <pre><code>&lt;div id="owl-demo" class="owl-carousel"&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/a&gt;
    &lt;a class="item link"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Appreciate if anyone could help me with this. Thanks</p>