当用户点击缩略图时,如何向我的网站添加可用的幻灯片?

时间:2018-04-27 05:42:02

标签: javascript html twitter-bootstrap image slideshow

我正在建立一个旅游网站,我想制作一个可以点击的响应式网格/一排缩略图,从而使幻灯片显示屏幕上显示他们点击的缩略图的完整图像。用户可以单击图像侧面的箭头以在同一组中的其他图像之间切换,或者点击“' x'在角落里退出幻灯片并返回到他们所在的完全相同位置的页面。

简单地说,我想在Bing或Google图片搜索中点击图片或点击Facebook相册中的图片时复制行为。

我认为这将是一项常见且易于操作的任务,但到目前为止,我的研究只得到了人们在其主页上放置的全页引导程序轮播。老实说,对我来说这听起来像是一个糟糕的主意,因为这会占用大量空间并将更重要的内容推到页面上。

这样做有简单的方法或现有的库吗?

对于它的价值,我的网站目前是在Angular 4中构建的并使用bootstrap。

1 个答案:

答案 0 :(得分:0)

我所寻找的是“灯箱”。当我开始将幻灯片视为弹出窗口时,我的搜索成功了。

现有一些不同的流行实现:

angular2-lightbox

W3Schools

FancyBox

FeatherLight

bootstrap-lightbox

ColorBox

Magnific

Chocolat