100% Width Content Slider - Is It Possible?

Question

I'm trying to make a Content Slider with a Width of 100% inside of it and I'm having a bit of trouble getting it finished. I have tried a number of methods but none seem to be holding a container inside for content to be centered and I would like to know the best method to achieve this. What I have so far is:

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");
        });
        });});

The site link for what I have achieved so far can be seen here: http://universitycompare.com/test-2/

But What I Want is both the wWidth div to move with the ImgBlock to then create a seamless 100% width slider with inline HTML content that centered.

Any Help in Advanced is appreciated!! UPDATE: JS FIDDLE: http://jsfiddle.net/Ldx1w0p0/

Answer 1

You might change the width of ImgBlock, cause it's 100% width it's using the screen widthso it won't scroll. But the solution would be to remove the width attribute of ImgBlock so it it will have the same width as wWidth