Question

我试图在其内部制作宽度为100％的内容滑块，并且我在完成它时遇到了一些麻烦。我尝试了很多方法，但似乎没有一个容器内部容纳内容，我想知道实现这一目标的最佳方法。到目前为止我所拥有的是：

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/

但我想要的是使用ImgBlock移动的wWidth div然后创建一个无缝的100％宽度滑块，其中心内嵌HTML内容。

高级中的任何帮助都表示赞赏!! 更新：JS FIDDLE：http://jsfiddle.net/Ldx1w0p0/

Answer 1

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

100％宽度内容滑块 - 可能吗？

1 个答案: