Slide bằng CSS (không dùng js không tự động chuyển ảnh)

Ghi chú: các ảnh rộng hơn 800x450 px

<style>
body {
  background:rgb(28,28,28);
}
[id="1"] {
  overflow:hidden;
  position:absolute;
  top:50%;
  left:50%;
  width:800px;
  height:450px;
  margin:-260px 0 0 -400px;
  border-radius:10px;
  -webkit-box-shadow:0 1px 7px #000;
  box-shadow:0 1px 7px #000;
}
[id="1"]:hover a {
  opacity:1;
}
[id="1"]:target [data-paginate][href$="1"],
[id="2"]:target [data-paginate][href$="2"],
[id="3"]:target [data-paginate][href$="3"],
[id="4"]:target [data-paginate][href$="4"] {
  background-position:0 0;
}
[id="1"]:target *+span {
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translateX(0);
}
[id="2"]:target *+span {
  -webkit-transform:translate3d(-800px,0,0);
  -moz-transform:translateX(-25%);
}
[id="3"]:target *+span {
  -webkit-transform:translate3d(-1600px,0,0);
  -moz-transform:translateX(-50%);
}
[id="4"]:target *+span {
  -webkit-transform:translate3d(-2400px,0,0);
  -moz-transform:translateX(-75%);
}
[id="2"] {
  display:block;
  height:100%;
  -webkit-mask-box-image:url(mask.png);
}
[id="2"]::before {
  content:"";
  width:100%;
  height:100%;
  background:url(border.png);
  pointer-events:none;
}
[id="2"]::before, a {
  position:absolute;
  z-index:1;
}
a {
  opacity:0;
  -webkit-transition:opacity .8s cubic-bezier(0,0,.4,1);
  -moz-transition:opacity .8s cubic-bezier(0,0,.4,1);
}
[data-paginate] {
  left:356px;
  bottom:15px;
  width:16px;
  height:17px;
  background:url(dots.png) no-repeat 0 100%;
}
[data-paginate][href$="2"] {
  left:381px;
}
[data-paginate][href$="3"] {
  left:405px;
}
[data-paginate][href$="4"] {
  left:429px;
}
[data-dir] {
  top:200px;
  background:url(arrows.png);
  width:29px;
  height:29px;
  visibility:hidden;
}
[data-dir]:active {
  -webkit-transform:translateY(1px);
  -moz-transform:translateY(1px);
}
[data-dir="l"] {
  left:30px;
  background-position:0 100%;
}
[data-dir="r"] {
  right:30px;
}
[id="1"]:target [data-dir="r"][href$="2"],
[id="2"]:target [data-dir="l"][href$="1"],
[id="2"]:target [data-dir="r"][href$="3"],
[id="3"]:target [data-dir="l"][href$="2"],
[id="3"]:target [data-dir="r"][href$="4"],
[id="4"]:target [data-dir="l"][href$="3"] {
  visibility:visible;
}
*+span {
  display:block;
  width:3200px;
  -webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.2,1);
  -moz-transition:-moz-transform 1s cubic-bezier(0,0,.2,1);
}
img {
  float:left;
}


</style>
<!-- BEGIN: CONTENT -->
<span id="1">
<span id="2">
<span id="3">
<span id="4">
<a data-paginate="" href="#1"></a>
<a data-paginate="" href="#2"></a>
<a data-paginate="" href="#3"></a>
<a data-paginate="" href="#4"></a>
<a data-dir="l" href="#1"></a>
<a data-dir="l" href="#2"></a>
<a data-dir="l" href="#3"></a>
<a data-dir="r" href="#2"></a>
<a data-dir="r" href="#3"></a>
<a data-dir="r" href="#4"></a>
<span>
<img src="http://tusachphathoc.org/gallery/images/hinh-anh-ve-cac-ngoi-chua/chua-viet-nam/chua_an_quang1.jpg">
<img src="http://tusachphathoc.org/gallery/images/hinh-anh-ve-cac-ngoi-chua/chua-viet-nam/chua_an_quang2.jpg">
<img src="http://tusachphathoc.org/gallery/images/hinh-anh-ve-cac-ngoi-chua/chua-viet-nam/chua_an_quang5.jpg">
<img src="http://tusachphathoc.org/gallery/images/hinh-anh-ve-cac-ngoi-chua/chua-viet-nam/chua_an_quang7.jpg">
</span>
</span>
</span>
</span>
</span>
<!-- END: CONTENT -->

Thanks vshare.biz (ko rõ nguồn)