[Help] Chèn Slide vào Web Nukeviet 3.4

 Hỗ trợ sử dụng NukeViet

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.

Bạn cần đăng nhập để tham gia thảo luận

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC