Question

我在这个问题的最后几天一直在苦苦挣扎，而且我的css知识也是过期了！我想要整页引导程序轮播滑块，我想在这个滑块上有一些图像[4 * 4]如图所示这是我的尝试，如果有人能帮忙吗？

JS FIDDLE： https://jsfiddle.net/ysv09o0w/

<style>
.form {
    margin-top: 10%;
}
.search .form-section{
    background:rgba(0,0,0,1.6);
    border: 2px solid #414141;
    border-radius: 5px;
    padding: 10px;
}

div#carousel-example-generic {
    position:relative;
    height:100%;
}

div.search {
    position:absolute;
    z-index:999;
    top:60px; /* change to whatever you want */
    left:10px; /* change to whatever you want */
    right:auto; /* change to whatever you want */
    bottom:auto; /* change to whatever you want */
}


 </style>

//我的滑块

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
        <div class="item active">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="<?php echo base_url();?>img/slider/bg_01.jpg" alt="" />
            <div class="container">
                <div class="carousel-caption">
                    <h1></h1>
                    <p class="lead"></p>
                </div>
            </div>
        </div>



        <div class="item">
            <img src="<?php echo base_url();?>img/slider/bg_02.jpg" alt="" />
            <div class="container">
                <div class="carousel-caption">
                    <h1></h1>
                    <p class="lead"></p>
                </div>
            </div>
        </div>
    </div>

上面的代码似乎是我没有做任何尝试，但有搜索栏等代码我还没有包含它们？当我克服了这个事件发生时，我一直面临着在滑块上放置搜索栏的问题!! < / p>

css for carousel

@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
    }
}

的javascript

jQuery(document).ready(function() {
    $('.carousel').carousel({
        pause: "false",
        interval: 2000
    });

    $('.carousel').css({'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
    $('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
    $('.carousel-inner div.item img').each(function() {
        var imgSrc = $(this).attr('src');
        $(this).parent().css({'background': 'url('+imgSrc+') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '10%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover'});
        $(this).remove();
    });

    $(window).on('resize', function() {
        $('.carousel').css({'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
    });
});

Bootstrap Carousel有多个图像？

0 个答案: