Jquery slider working good, but why does it break when try to make it centered?

Question

I'm using a jquery slider plugin and I have it working (new to jquery/css/html), but when I try to center the slider it breaks. The red dot that moves around the circle does not center along with the pictures? I'd like to understand why this is and how can it be fixed? Thank you very much.

http://jsfiddle.net/asQL9/

HTML

<div id="rotatescroll" class="centered">
    <div class="viewport">
        <ul class="overview">
            <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a>
            </li>
            <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a>
            </li>
            <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr1.jpg" /></a>
            </li>
            <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a>
            </li>
            <li><a href="http://www.baijs.nl"><img src="https://raw.githubusercontent.com/wieringen/tinycircleslider/master/examples/simple/images/hdr2.jpg" /></a>
            </li>
        </ul>
    </div>
    <div class="dot"></div>
    <div class="overlay"></div>
    <div class="thumb"></div>
</div>

CSS

img { border: 0; }
.centered {
    margin: 0 auto;
}

#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:290px; position: relative; margin:0 auto; overflow:hidden; width:290px; border-radius: 50%; }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .thumb { background:url('http://baijs.com/tinycircleslider/images/bg-thumb.png') no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }
#rotatescroll .dot { background:url('http://baijs.com/tinycircleslider/images/bg-dot.png') no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }
#rotatescroll .overlay {background:url('http://i.imgur.com/PtgjArP.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: -2px; height:300px; width:300px; }

.highlight, .indicator{background-color:#FC0;}

jquery

$('#rotatescroll').tinycircleslider({
   interval: true,
   dotsSnap: true,
   intervalTime: 1000
});

Answer 1

When calculating the size of the container, margins are included into calculation and later used to determine the position of the red dot. A possible solution is to exclude margins when calculating container width by passing false or omitting the parameter:

containerSize =
{
    width  : $container.outerWidth()
,   height : $container.outerHeight()
}

If you don't feel like editing the script, you can try centering your div without using margins, for example:

.centered {    
    left: calc( 50% - 150px );
}

Or by using a wrapper div, like this: http://jsfiddle.net/asQL9/1/