Bài viết này tôi hướng dẫn các bạn tạo kwick slider bằng css3 với hiệu ứng không kém gì jquery kwick plugin.
Demo
Download
Mã HTML
Code
<ul class="kwick">
<li>
<a href="#">
<img src="img/1.jpg" alt="image"/>
<p>Lorem ipsum dolor sit amet</p>
</a>
</li>
<li>
<a href="#">
<img src="img/2.jpg" alt="image"/>
<p>Consectetur adipiscing elit</p>
</a>
</li>
<li>
<a href="#">
<img src="img/3.jpg" alt="image"/>
<p>Pellentesque habitant morbi tristique </p>
</a>
</li>
<li>
<a href="#">
<img src="img/4.jpg" alt="image"/>
<p>Senectus et netus</p>
</a>
</li>
<li>
<a href="#">
<img src="img/5.jpg" alt="image"/>
<p>Vestibulum sollicitudin ipsum</p>
</a>
</li>
</ul>
Thẻ p ở đây chứa tiêu đề của mỗi bức ảnh.
Mã CSS
Ta có mã CSS để tạo giao diện giống trên như sau:
Code
.kwick{
width:960px;
height:400px;
overflow:hidden!important;
position:relative;
border-radius:5px;
box-shadow:0 0 5px rgba(0,0,0,0.4);
}
.kwick li{
position:absolute;
top:0;
}
.kwick li:nth-child(1){
left:0;
}
.kwick li:nth-child(2){
left:192px;
}
.kwick li:nth-child(3){
left:384px;
}
.kwick li:nth-child(4){
left:576px;
}
.kwick li:nth-child(5){
left:768px;
}
.kwick a{
position:relative;
display:block;
box-shadow:0 0 7px rgba(0,0,0,1)
}
.kwick img{
display:block;
}
.kwick p{
position:absolute;
left:0;
bottom:-50px;
width:728px;
padding:0 20px;
height:50px;
line-height:50px;
font-family:helvetica,arial,sans-serif;
color:#fff;
background-color:rgba(0,0,0,0.9);
text-shadow:0 1px 0 #000;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
}
Tạo slide với CSS3
Đầu tiên thêm cho thẻ li và thẻ p thuộc tính css3-transition.
Code
.kwick li,.kwick p{
/*---code trước---*/
-moz-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
Bây giờ ta sử dụng ~ css-selector để khi hover vào thẻ li đứng trước sẽ đẩy các thẻ li còn lại đứng sau về bên phải màn hình:
Code
.kwick li:nth-child(1):hover ~ li:nth-child(5),
.kwick li:nth-child(2):hover ~ li:nth-child(5),
.kwick li:nth-child(3):hover ~ li:nth-child(5),
.kwick li:nth-child(4):hover ~ li:nth-child(5)
{
left:912px;
}
.kwick li:nth-child(1):hover ~ li:nth-child(4),
.kwick li:nth-child(2):hover ~ li:nth-child(4),
.kwick li:nth-child(3):hover ~ li:nth-child(4)
{
left:864px;
}
.kwick li:nth-child(1):hover ~ li:nth-child(3),
.kwick li:nth-child(2):hover ~ li:nth-child(3)
{
left:816px;
}
.kwick li:nth-child(1):hover ~ li:nth-child(2){
left:768px;
}
Tuy nhiên chỉ có thẻ li:nth-child(1) là giữ nguyên vị trí còn khi hover vào các thẻ còn lại thì nó sẽ phải đẩy sang bên trái màn hình:
Code
.kwick li:nth-child(2):hover{
left:48px;
}
.kwick li:nth-child(3):hover{
left:96px;
}
.kwick li:nth-child(4):hover{
left:144px;
}
.kwick li:nth-child(5):hover{
left:192px;
}
Bây giờ lại sinh ra vấn đề là khi hover vào thẻ li thứ 3 trở đi làm sao để các thẻ đứng trước nó kéo về bên trái màn hình. Ta có đoạn code sau sẽ giải quyết vấn đề đó, tuy nhiên chú ý ta phải để đoạn code này nằm trước 2 đoạn code trên.
Code
.kwick:hover li:nth-child(2){
left:48px;
}
.kwick:hover li:nth-child(3){
left:96px;
}
.kwick:hover li:nth-child(4){
left:144px;
}
Tóm lại toàn bộ code khi hover sẽ tạo slide như sau:
Code
.kwick:hover li:nth-child(2){
left:48px;
}
.kwick:hover li:nth-child(3){
left:96px;
}
.kwick:hover li:nth-child(4){
left:144px;
}
.kwick li:nth-child(1):hover ~ li:nth-child(5),
.kwick li:nth-child(2):hover ~ li:nth-child(5),
.kwick li:nth-child(3):hover ~ li:nth-child(5),
.kwick li:nth-child(4):hover ~ li:nth-child(5)
{
left:912px;
}
.kwick li:nth-child(1):hover ~ li:nth-child(4),
.kwick li:nth-child(2):hover ~ li:nth-child(4),
.kwick li:nth-child(3):hover ~ li:nth-child(4)
{
left:864px;
}
.kwick li:nth-child(1):hover ~ li:nth-child(3),
.kwick li:nth-child(2):hover ~ li:nth-child(3)
{
left:816px;
}
.kwick li:nth-child(1):hover ~ li:nth-child(2){
left:768px;
}
.kwick li:nth-child(2):hover{
left:48px;
}
.kwick li:nth-child(3):hover{
left:96px;
}
.kwick li:nth-child(4):hover{
left:144px;
}
.kwick li:nth-child(5):hover{
left:192px;
}
.kwick li:hover p{
bottom:0;
}