100％宽度内容滑块 - 是否有可能？

我试图制作一个宽度为100％的内容滑块，并且在完成时遇到了一些麻烦。我已经尝试了很多方法，但没有一个看起来像是在内部容纳一个容器，我想知道实现这个目的的最佳方法。我至今是：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/

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

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

来源

2014-08-29 Owen O' Neill

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

来源

2014-08-29 17:43:09 Ahmad

它不起作用我害怕，它导致它不太动。基于浏览器的当前屏幕宽度，是否有可能移动滑块？ – 2014-08-29 17:47:02

尝试为ImgBlock指定固定宽度，然后为ImgBlock添加此CSS：white-space：nowrap;显示：块;然后jquery $（'。ImgBlock'）。animate（{scrollLeft：+100}）; – Ahmad 2014-08-29 17:57:59

100％宽度内容滑块 - 是否有可能？

回答

相关问题