409 Tiny Circleslider — круговая слайдер-карусель. В отличие от остальных стандартных слайдеров-каруселей, в этой, встроена интересная навигация и довольно неплохой функционал показов изображений.
Circleslider может работать с изображениями на любой странице. Построена она на библиотеке jQuery.
Особенности
- Поддержка слайдинга превьюшек или pager
- Интервал автоматической прокрутки слайдов
- Привязка к странице
- Скрывать точки при окончании просмотра
- Установка размера(радиус) слайдера
- После прокрутки слайда можно вернутся к предыдущему программно.
- Простая настройка
- Lightweight занимает всего 130 линий кода. Размер файла — 4 kb
Примеры
Как это работает
|
1 2 3 4 5 6 7 8 9 10 |
<div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a rel="group" href="images/hdr1.jpg"><img src="images/hdr1.jpg"></a></li> <li><a rel="group" href="images/hdr2.jpg"><img src="images/hdr2.jpg"></a></li> <li><a rel="group" href="images/hdr3.jpg"><img src="images/hdr3.jpg"></a></li> <li><a rel="group" href="images/hdr4.jpg"><img src="images/hdr4.jpg"></a></li> </ul> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 |
#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 .overlay {background:url(../images/design/bg-rotatescroll.png) no-repeat 0 0; position: absolute; left: 0; top: 0; height:300px; width:300px; } #rotatescroll .thumb { background:url(../images/design/bg-thumb.png) no-repeat 0 0; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 26px; z-index: 200; height: 26px; } #rotatescroll .dot { background:url(../images/design/bg-dot2.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; } |
Прозрачность не поддерживается браузером Internet Explorer 6. Замените путь к изображениям на ваш собственный.
|
1 2 3 4 5 6 7 8 9 |
<!--[if lte IE 6]> <style type="text/css"> /* Internet Explorer 6 PNG transparency fix */ #rotatescroll1 .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src="http://www.baijs.nl/images/design/bg-rotatescroll.png", sizingmethod='scale'); } #rotatescroll1 .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src="http://www.baijs.nl/images/design/bg-thumb.png", sizingmethod='scale'); } </style> <![endif]--> |
JS
Сначала добавьте вниз тега head поддержку jQuery и tinycircleslider . Затем код, расположенный ниже.
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $('#rotatescroll').tinycircleslider({ 'interval': true, snaptodots: true }); }); </script> |
Удачного просмотра!
