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％寬度內容滑塊 - 是否有可能？

回答

相關問題