jquery - 使用谷歌地图在jquery mobile中添加轮播

Question

我想使用 google map 在 jquery mobile 上创建一个页面。

像这样: Reference from Omar

但页面下方有一个轮播，您可以在其中滚动并从中选择图钉。

我尝试使用owl carousel使用演示代码、css 和 html，但它似乎不起作用，或者更确切地说，它没有显示在屏幕上。

<div id="owl-demo" class="owl-carousel">
  <a class="item link"><h1>1</h1></a>
  <a class="item link"><h1>2</h1></a>
  <a class="item link"><h1>3</h1></a>
  <a class="item link"><h1>4</h1></a>
  <a class="item link"><h1>5</h1></a>
  <a class="item link"><h1>6</h1></a>
  <a class="item link"><h1>7</h1></a>
  <a class="item link"><h1>8</h1></a>
  <a class="item link"><h1>9</h1></a>
  <a class="item link"><h1>10</h1></a>
  <a class="item link"><h1>11</h1></a>
  <a class="item link"><h1>12</h1></a>
  <a class="item link"><h1>13</h1></a>
  <a class="item link"><h1>14</h1></a>
  <a class="item link"><h1>15</h1></a>
  <a class="item link"><h1>16</h1></a>
</div>

如果有人能帮助我，我将不胜感激。谢谢

Answer 1

猫头鹰轮播似乎与​​ jQM 配合得很好。只需为您的 map 创建一个 div，为您的轮播创建另一个 div。根据需要放置它们并在 pagecreate 或容器 beforeshow 中初始化:

$(document).on("pagecreate", "#page1", function () {
    $("#owl-demo").owlCarousel({
        items: 4,
        itemsDesktop: [1199, 4],
        itemsDesktopSmall: [1080, 3],
        itemsTablet: [768, 2],
        itemsMobile: [450, 1]
    });

    loadMap("#map-canvas");
});

确保您在页面中引用 owl css 文件以及 js 文件。

Here is a working DEMO