/******************************************************\ * * Base TouchCarousel stylesheet * * Contents: * * 1. Main containers * 2. Carousel items * 3. Arrows(direction) navigation * 4. Paging navigation * 5. Scrollbar * 6. Cursors * \******************************************************/ /******************************************************\ * * 1. Main containers (carousel size, background) * \******************************************************/ .touchcarousel { position: relative; width: 600px; height: 400px; /* style is removed after carousel is inited, use !important if you want to keep it*/ overflow: hidden; } .touchcarousel .touchcarousel-container { position: relative; margin: 0; padding: 0; list-style: none; left: 0; } .touchcarousel .touchcarousel-wrapper { position: relative; overflow:hidden; width: 100%; height: 100%; } /******************************************************\ * * 2. Carousel items (item styling, spacing between items) * \******************************************************/ .touchcarousel .touchcarousel-item { /* use margin-right for spacing between items */ margin: 0 0 0 0; padding: 0; float: left; } /* Last carousel item */ .touchcarousel .touchcarousel-item.last { margin-right: 0 !important; } /******************************************************\ * * 3. Arrows(direction) navigation * \******************************************************/ /* arrow hitstate and icon holder */ .touchcarousel .arrow-holder { height: 100%; width: 45px; position: absolute; top: 0; display: block; cursor: pointer; z-index: 25; } .touchcarousel .arrow-holder.left { left: 0; } .touchcarousel .arrow-holder.right { right: 0; } /* arrow icons */ .touchcarousel .arrow-icon{ width: 45px; height: 90px; top:50%; margin-top:-45px; position: absolute; cursor: pointer; } .touchcarousel .arrow-icon.left { } .touchcarousel .arrow-icon.right { } .touchcarousel .arrow-holder:hover .arrow-icon { } .touchcarousel .arrow-holder.disabled { cursor: default; } .touchcarousel .arrow-holder.disabled .arrow-icon { cursor: default; } /******************************************************\ * * 4. Paging navigation * \******************************************************/ .touchcarousel .tc-paging-container { width:100%; overflow:hidden; position:absolute; margin-top:-20px; z-index:25; } .touchcarousel .tc-paging-centerer { float: left; position: relative; left: 50%; } .touchcarousel .tc-paging-centerer-inside { float: left; position: relative; left: -50%; } /* Paging items */ .touchcarousel .tc-paging-item { float:left; cursor:pointer; position:relative; display:block; text-indent: -9999px; } .touchcarousel .tc-paging-item.current { } .touchcarousel .tc-paging-item:hover { } /******************************************************\ * * 5. Scrollbar * \******************************************************/ .touchcarousel .scrollbar-holder { position: absolute; z-index: 30; left: 6px; right: 6px; bottom: 5px; height:4px; overflow: hidden; } .touchcarousel .scrollbar { position: absolute; left:0; height:4px; bottom: 0px; } .touchcarousel .scrollbar.dark { background-color: rgb(130, 130, 130); background-color: rgba(0, 0, 0, 0.5); } .touchcarousel .scrollbar.light { background-color: rgb(210, 210, 210); background-color: rgba(255, 255, 255, 0.5); } /******************************************************\ * * 6. Cursors * \******************************************************/ /* IE and Opera use "move", FF uses -moz-grab */ /*.touchcarousel .grab-cursor{ cursor:url(grab.png) 8 8, move; } .touchcarousel .grabbing-cursor{ cursor:url(grabbing.png) 8 8, move; }*/ /* Cursor that used when mouse drag is disabled */ .touchcarousel .auto-cursor{ cursor:auto; } /* Copyright 2011, Dmitry Semenov, http://dimsemenov.com */