我有一个页面中的电影列表,我想要向左添加幻灯片以显示电影时间并向右滑动以显示电影院。
我尝试为列表中的每个项目设置快照抽屉和快照内容,但这不起作用。
有没有人知道如何做到这一点。
代码: 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>
感谢名单,
答案 0 :(得分:0)
我相信您的所有元素都已在HTML上呈现,但它们没有正确对齐。您应该使用right
或left
选项提供正确的对齐方式,例如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>