在页面中有多个snap-drawes和snap-contents

时间:2015-04-05 09:18:51

标签: javascript angularjs snapjs

我有一个页面中的电影列表,我想要向左添加幻灯片以显示电影时间并向右滑动以显示电影院。

我尝试为列表中的每个项目设置快照抽屉和快照内容,但这不起作用。

有没有人知道如何做到这一点。

代码: http://plnkr.co/edit/eFMdPBlWRKbCNYN3tzPx?p=preview

<div class="container">
    <div class="row">
      <ul>
        <li>
          <snap-drawers snap-id="'movie1'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie1'">
            <snap-dragger>
              <h1>Movie 1</h1>
            </snap-dragger>
          </snap-content>
        </li>
        <li>
          <snap-drawers snap-id="'movie2'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie2'">
            <snap-dragger>
              <h1>Movie 2</h1>
            </snap-dragger>
          </snap-content>
        </li>
        <li>
          <snap-drawers snap-id="'movie3'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie3'">
            <snap-dragger>
              <h1>Movie 3</h1>
            </snap-dragger>
          </snap-content>
        </li>
      </ul>
    </div>
  </div>

感谢名单,

1 个答案:

答案 0 :(得分:0)

我相信您的所有元素都已在HTML上呈现,但它们没有正确对齐。您应该使用rightleft选项提供正确的对齐方式,例如snap-drawers="left"snap-drawer="left"snap-content="left"

<强>标记

<li>
    <snap-drawers="left" snap-id="'movie1'">
     <snap-drawer="left">
        Movie times
     </snap-drawer>
     <div snap-drawer="right">
         Movie cinemas
     </div>
     </snap-drawers>
     <snap-content="left" snap-id="'movie1'">
        <snap-dragger>
          <h1>Movie 1</h1>
        </snap-dragger>
     </snap-content>
</li>

Working Plunkr