Travel with her

Where will you take her?

How it works

1. Get your graphics ready.
2. Download the plugin here.
3. Code HTML/CSS.
4. Insert jquery.tinycircleslider.js and javascript into HTML.
5. Customize CSS coding through tinycircleslider.css.

The HTML

<div id="rotatescroll">
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/img01.png"></li>
            <li><img src="images/img02.png"></li>
            <li><img src="images/img03.png"></li>
            <li><img src="images/img04.png"></li>
            <li><img src="images/img05.png"></li>
        </ul>
    </div>

    <div class="dot"></div>
    <div class="overlay"></div>
    <div class="thumb"></div>
</div>

The CSS

img { border: 0; }

/* Tiny Circleslider */
#rotatescroll { 
    height:676px; 
    position:relative; 
    width:940px; 
}

#rotatescroll .viewport { 
    height:400px; 
    position: relative; 
    left: 0px; 
    top:138px; 
    margin:0 auto; 
    overflow:hidden; 
    width:400px; 
}

#rotatescroll .overview {
    width: 900px;
    height: 600px;
    position: relative; 
    left: 0; top: 0;
    width: 0px; 
    list-style: none; 
    margin: 0 auto; 
    padding: 0;
}

#rotatescroll .overview li { 
    height:400px; 
    width:400px; 
    float: left; 
    position: relative; 
}

#rotatescroll .overlay {
    background:url(../images/camera.png) no-repeat 0 0; 
    pointer-events: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height:600px; 
    width:900px; 
}

#rotatescroll .thumb {
    margin: 0px 0 0;
    background:url(../images/bg-thumb.png) no-repeat 50% 50%; 
    position: absolute; 
    top: 100px; 
    left: 0;
    cursor: pointer;
    width:50px; 
    height: 50px; 
    z-index: 200; 
}

#rotatescroll .dot { 
    background:url(../images/bg-dot.png) no-repeat 0 0; 
    display: none;
    height: 12px; 
    width: 12px; 
    position: absolute; 
    left: 1555px; 
    top: 10px; 
    z-index: 100; }

#rotatescroll .dot span { 
    display: none; 
}

The Javascript

$(document).ready(function()
        {
            $("#rotatescroll").tinycircleslider({
                interval    : true
            ,   radius      : 215
            ,   dotsSnap    : true
            });
        });