Making a carousel (image slider) moved over on a webpage

Question

This is the code to my carousel (image slider). I would like to know how to reposition the whole slider on my webpage. I basically want to move it a bit to the left as a whole. The website if link to this slider is http://www.menucool.com/javascript-image-slider and i also made a jsfiddle here http://jsfiddle.net/lasquish/cynar4ug/ . Website code fiddle http://jsfiddle.net/lasquish/Low0emf1/

-Thanks for the help!

<div class="div1">
    <a href="demo1.html" class="current"></a>
</div>

<div id="sliderFrame">
    <div id="slider" style="text-align: center;">
        <a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
            <img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
        </a>
        <img src="images/image-slider-1.jpg" />
        <img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
        <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
        <img src="images/image-slider-5.jpg" />
    </div>
    <div id="htmlcaption" style="display: none;">
        <a href="http://www.google.com/">Click me: To start selling and trading!</a>.
    </div>
</div>

Answer 1

your fiddle isn't loading for me, but based in this code it would be like this:

#sliderFrame {
    position: relative;
    width: 960px;
    margin: 0px auto;
    left: -30px;
}

where -30px is the amount of pixels to the left you want to move the slider. An even better option would be to add the slider inside a container like

<div class="slide_contain">
<div id="sliderFrame">
    <div id="slider" style="text-align: center;">
        <a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
            <img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
        </a>
        <img src="images/image-slider-1.jpg" />
        <img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
        <img src="images/image-slider-4.jpg" alt="#htmlcaption" />
        <img src="images/image-slider-5.jpg" />
    </div>
    <div id="htmlcaption" style="display: none;">
        <a href="http://www.google.com/">Click me: To start selling and trading!</a>.
    </div>
</div>

</div>

Now in your CSS, you add this:

.slide_contain {
    position:relative;
    width:960px;
    height:auto;
    min-height:300px
}
#sliderFrame {
    position: absolute;
    width: 960px;
    margin: 0px auto;
    left: -30px;
}

This method will allow you to have better control and avoid problems when moving the sliderFrame div