Toi có file Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Image Slider</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!--
Markup của tutorial nà y rất đơn giản
radio button + label để kÃch hoạt sá»± kiện click + image chÃnh
-->
<div class="slider">
<!-- tự động hiển thị ảnh đầu tiên khi load -->
<input type="radio" name="slide_switch" id="id1" checked>
<label for="id1">
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="" width="100">
</label>
<!-- main image -->
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="image">
<input type="radio" name="slide_switch" id="id2">
<label for="id2">
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="" width="100">
</label>
<!-- main image -->
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="image">
<input type="radio" name="slide_switch" id="id3">
<label for="id3">
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="" width="100">
</label>
<!-- main image -->
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="image">
<input type="radio" name="slide_switch" id="id4">
<label for="id4">
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="" width="100">
</label>
<!-- main image -->
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="image">
<input type="radio" name="slide_switch" id="id5">
<label for="id5">
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" alt="" width="100">
</label>
<!-- main image -->
<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" alt="image">
</div>
</body>
</html>
Và một file Css
/* style */
/* thêm transition và shadow cho ảnh */
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
}
.slider {
width: 640px; /* cùng width của image */
position: relative;
padding-top: 320px;
margin: 100px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider > img {
position: absolute;
top: 0;
left: 0;
transition: all .3s;
}
input[name='slide_switch'] {
display: none;
}
/* thêm khoảng trống cho thumbnail */
.slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
/* để độ trong suốt mặc định thấp */
opacity: .6;
transition: all .8s;
}
.slider label img {
display: block;
}
/* click effect */
.slider input[name='slide_switch']:checked + label {
opacity: 1;
border-color: #666;
}
/* style cho main image */
.slider input[name='slide_switch'] ~ img {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* click sẽ hiện ảnh chính */
.slider input[name='slide_switch']:checked + label + img {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
Hiện tại tôi muốn dùng nó để tạo 1 Block Slide với điều kiện là:
1 - Hình ảnh được lấy từ thư viện Album của module Album
2 - Các ảnh nhỏ bên dưới chạy ngang qua.
3 - Xài được trên NV3 và NV4
ACE ai làm được xin giúp đỡ(mình rất kém lập trình)
Cái module Album mình chưa dùng nên cũng ko biết nó như thế nào, song bạn cứ đề xuất với người phát triển module đó ý, họ phát triển luôn cái slider luôn cho nhanh.
Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.
Sử dụng CMS NukeViet, thiết kế bởi TDFOSS.,LTD