0

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

2 Answers 2

0

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/

1
  • Great thank you so much, tricky fix. I haven't seen calc before. I will rad more about it and learn more. Jun 30, 2014 at 12:49
0

I had the same problem but in mobile version the div that contains the tinycircleslider floated. For this:

.wrapper {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
min-width:100px;    
overflow: hidden;
}

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

In this way the slider is centered and is RESPONSIVE

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.