Question

我正在询问这是否是一个带有触摸控制的图像滑块的“插入式”解决方案和内置的可能的花式框（点击放大）？（计划是托管图片并允许客户继续将图像添加到他们的Google云端硬盘帐户，而无需为他们添加的每张图片创建“模态/幻灯箱”代码。

我试过https://github.com/stevenwanderski/bxslider-4它作为滑块效果很好，但在移动设备上，图片大小错误，需要刷新页面。触摸控件也不能很好地工作。

希望获得一些输入，我正在使用bootstrap，但任何响应式解决方案都可以。

Answer 1

您可以使用bootstraps carousel作为图片滑块，然后使用模式弹出较大的图片，只需更改image's来源，这样您只需制作一个modal。< / p>

 <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       <!-- Change image source for large popup-->
        <img src="..." class="img-responsive" alt="Responsive image">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

bootstrap slide + fancy box解决方案

1 个答案: