Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - Băng chuyền - Không thể định vị hình ảnh trung tâm

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 01:25:09 30 4
mua khóa gpt4 Nike

Tôi gặp sự cố với băng chuyền/thanh trượt của mình, tôi đã thiết kế sao cho hình ảnh trước và hình ảnh tiếp theo chiếm 25% mỗi bên và hình ảnh ở giữa chiếm 50% chiều rộng. Vấn đề là tôi có thể thay đổi nền của hình ảnh bên trái và bên phải, nhưng dường như tôi không thể áp dụng cùng màu cho hình ảnh ở giữa. Tôi đã thử định vị băng chuyền bằng hầu hết mọi lớp và ID, nhưng tôi đã hết ý tưởng về cách định vị hình ảnh trung tâm:

nhập mô tả hình ảnh ở đây

Cảm ơn mọi gợi ý, đây là HTML:



Đây là CSS của tôi:

.carousel-bên trong {
    chiều rộng: 150%;
    trái: -25%;
    nền: rgba(248, 247, 216, 0,7);
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
    -webkit-transform: Translate3d(33%, 0, 0);
    biến đổi: Translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
    -webkit-transform: Translate3d(-33%, 0, 0);
    biến đổi: Translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
    nền: #002266;
    chiều rộng: 25%;
}
.thanh trượt {
    lề trên: -100px;
    lề trái: -15px;
    lề dưới: 2%;
    top: 0;
    left: 0;
    chỉ số z: 11;
    chiều rộng: 105vw;
    đường viền trên cùng: 10px rắn #fff7ea;
    viền dưới: 10px Solid #fff7ea;
}
.col-xs-4 {
    phần đệm: 0 0 0 0;
}
.carousel .item {
    nền: #002266;
}


Và jQuery:

  $(document).ready(function () {
    $('#myCarousel').carousel({
        khoảng thời gian: 4000
    })
    $('.carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        } khác {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});

Ngoài ra còn có bản demo codepen .

câu trả lời hay nhất

Lấy phần khai báo màu từ phần tử cạnh của bạn và áp dụng nó cho toàn bộ vùng chứa như thế này:

.carousel-inner{position:relative;}

.carousel-inner:sau {
    nội dung:"";
    chiều rộng: 100%; chiều cao: 100%;
    nền: rgba(0, 34, 102, 0.3);
    vị trí: tuyệt đối; trên cùng: 0;
}

Điều này sẽ tạo ra một lớp màu xanh mờ trên tất cả mọi thứ

Về javascript - băng chuyền - không thể định vị hình ảnh trung tâm, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/48253937/

30 4 0
Bài viết khuyến nghị: python - Làm cách nào để tìm một chuỗi trong tài liệu HTML, bỏ qua khoảng trắng?
Bài viết khuyến nghị: Nhóm người tiêu dùng Kafka (kafka-node) nhận được tin nhắn từ tất cả các phân vùng node.js - Nhóm người tiêu dùng Kafka (kafka-node) nhận được tin nhắn từ tất cả các phân vùng
Bài viết khuyến nghị: Fork() không trả về id > 0 trong tiến trình gốc
Bài viết khuyến nghị: Cách đạt được tính song song bằng cách sử dụng công cụ trang trí lốc xoáy gen.Task/gen.coroutine
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress