100% Width Content Slider - возможно ли это?

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/

Но то, что я хочу, - это и wWidth div для перемещения с ImgBlock, чтобы создать бесшовный слайдер шириной 100% с встроенным HTML-контентом, который центрирован.

Любая помощь в продвинутых оценена! UPDATE: JS FIDDLE: http://jsfiddle.net/Ldx1w0p0/

Answer 1

Вы можете изменить ширину ImgBlock, потому что это 100% ширина, использующая ширину экрана, и она не будет прокручиваться. Но решение было бы удалить атрибут ширины ImgBlock, чтобы он имел ту же ширину, что и wWidth.