javascript - 100% 宽度内容 slider - 这可能吗？

Question

我正在尝试制作一个内部宽度为 100% 的内容 slider ，但我在完成它时遇到了一些麻烦。我尝试了多种方法，但似乎都没有在内部放置一个容器以使内容居中，我想知道实现此目的的最佳方法。到目前为止我所拥有的是:

HTML

<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</button>
<div class="fullWidth">
    <div class="imgBlock" style="background-image: url('<?= IMAGES_DIR; ?>/homepage/slide1.png');">
        <div class="wWidth">
            <h1>What Uni should <Br /> I choose to go too?</h1>
            <h2>519 Reviews / 2460 Users / 33,469 Courses</h2>
            <h2>FREE UNBIASED COMPREHENSIVE STUDENT GUIDE</h2>  
        </div>
    </div>
    <div class="imgBlock" style="background-image: url('<?= IMAGES_DIR; ?>/homepage/slide2.png');">
        <div class="wWidth">
            <h1>Birkbeck, University of London</h1>
            <h2>See All 156 Courses</h2>
            <h2>RATED NUMBER #1 LONDON COLLEGE</h2> 
        </div>
    </div>
    <div class="imgBlock" style="background-image: url('<?= IMAGES_DIR; ?>/homepage/slide3.png');">
        <div class="wWidth">
            <h1>Best Freshers Week 2014</h1>
            <h2>Hundreds of Universities, Who Will WIN!?</h2>
            <h2>RATE YOUR UNIVERSITY TODAY</h2> 
        </div>
    </div>
</div>

CSS

.fullWidth { width:100%; height:255px; backgroudn:#000; overflow:hidden; }
.imgBlock { width:100%; background-size:cover; height:255px; }
.wWidth { width:960px; margin:0px auto; height:255px; }
.wWidth  h1 { color:#FFF; margin:40px 0px 0px 0px; font-family: 'Lobster', cursive; font-weight:lighter; font-size:44px; line-height:43px; text-shadow: 1px 1px 0px #333; }
.wWidth  h2 { float:left; clear:left; color:#FFF; text-shadow: 1px 1px 0px #333; margin-top:10px; padding-top:10px; border-top:1px dotted #2aabe2; }

JQUERY:

$j = jQuery.noConflict();    
$j(document).ready(function() {
        $(".fullWidth").diyslider({
            width: "100%", // width of the slider
            height: "255px", // height of the slider
            display: 3, // number of slides you want it to display at once
            loop: false // disable looping on slides
        }); // this is all you need!

        // use buttons to change slide
        $("#go-left").bind("click", function(){
            // Go to the previous slide
            $(".imgBlock").diyslider("move", "back");
        });
        $("#go-right").bind("click", function(){
            // Go to the previous slide
            $(".imgBlock").diyslider("move", "forth");
        });
        });});

到目前为止我所取得的成就的站点链接可以在这里看到: http://universitycompare.com/test-2/

但我想要的是 wWidth div 与 ImgBlock 一起移动，然后创建一个无缝的 100% 宽度 slider ，其中内联 HTML 内容居中。

感谢任何高级帮助!!更新:JS FIDDLE:http://jsfiddle.net/Ldx1w0p0/

Answer 1

您可以更改 ImgBlock 的宽度，因为它是 100% 宽度，它正在使用屏幕宽度，所以它不会滚动。但解决方案是删除 ImgBlock 的 width 属性，使其具有与 wWidth 相同的宽度