如何使用一个图像创建一个图像幻灯片？ （自行滑动）

Question

对于这个令人困惑，广泛，虚拟的问题感到抱歉。

假设我只有 ONE 图像，我想创建一个幻灯片放映，（在角度或jquery或javascript或只是与Css，无论如何:(）。

我想要的只是当用户点击我的幻灯片按钮时，此图片向右滑动，同时向右滑动，同时此图片从左侧滑入;

（此图片的一部分已向右滑动，同时从左侧进入）

喜欢这个插图：

所以实际上这个Imeage永远不会从视图中消失，只是幻灯片本身。

我用angularJS创建了这个，但是我不能同时使用它，我的意思是，图像向左滑动，完成后，它从右侧向内滑动，所以有时候视图是空的。 我不想要这个

请帮助我 插件，css exapme，角度示例，javascript，jquery，任何事情都可以。

这是我的最后一次尝试，我一直在搜索和编码一个月，但没有成功:(

Answer 1

CSS可以提供​​一些可能性。

有一个有伪元素的人， text-indent以及transition和pointer-events切换点击效果。

HTML中的

tabindex允许div通过点击进行关注，最终通过Tab键进行关注。

<强> DEMO

HTML

<div class="slidebif" tabindex="0"><img src="http://lorempixel.com/200/300/people/9"/></div>

CSS

.slidebif {
  margin:1em auto;/* optionnal*/
  cursor:pointer;/* let's show it  clicks */
  width:200px;/* img width*/
  white-space:nowrap;/* keep img and cloned pseudo on same line */
  text-indent:0;/* set for transition */
  transition:0.5s;/* tune it */
  overflow:hidden;/* hide the pseudo */
}
.slidebif:after {
  content: url(http://lorempixel.com/200/300/people/9);/* same image as img src */
}
.slidebif:after, .slidebif img {
  vertical-align:top;/* optionnal*/
}
.slidebif:focus {
  text-indent:-200px;/* bring pseudo in sight */
  pointer-events:none;/* kill click catching , so it looses focus if clicked again */
}

---

<强> variant with a 2 columns table