Html 带多个映像的引导转盘？

我一直在挣扎，从过去几天在这个问题，而且我的css知识是一些什么已经过期！我想要整页引导旋转木马滑块，我想要一些图片在这个滑块上[4*4]，如图所示，如果有人能帮忙，我的尝试

JS小提琴：

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()});
    });
}); 

---

添加一个JSFIDLE，可以帮我们一点忙：）那么你的旋转木马JS在哪里？@ddsbro我添加了我的代码，里面有很多php代码，所以没有fiddel；填充一个JSFIDLE，可以帮我们一点忙：）旋转木马的JS在哪里？@ddsbro我添加了我的代码，里面有很多php代码，所以没有fiddel；P

<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>

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

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()});
    });
});