Jquery slider; made the container transparent, how do I hide the image overflow?


Tags: javascript,jquery,css,jquery-ui-slider

Problem :

This jquery slider normally is outlined using a square white box, which hides the image overflow. I need to put the slider on top of another image, so the background cannot be white. I created a new .png file with a transparent background. But how do I hide the image overflow?

Thank you very much; And if you look you can see the old #rotatescroll .overlay background image, and I added a second #rotatescroll .overlay with the transparent background image.

http://jsfiddle.net/QwLun/

HTML

<div id="rotatescroll">
    <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/hdr3.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; }


#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#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://baijs.com/tinycircleslider/images/bg-rotatescroll.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }

#rotatescroll .overlay {background:url('http://i.imgur.com/PtgjArP.png') no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }

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

Jquery

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


Solution :

In this particular case, since the view is meant to be round, I think border-radius: 50% on #rotatescroll .viewport is what you are looking for. With a little tweaking, you can remove the slight outline. See example: http://jsfiddle.net/WKD32/


    CSS Howto..

    How to create a scrollable element within a floated element?

    How to have 3 sections in a row

    How to keep