Orbit - Хороший слайдер на jQuery, с всплывающим описанием слайдов, паузой, анимацией времени, таймером, горизонтальной, вертикальной и с fade заменой слайдов
Для настройки подключаем jquery и скрипт слайдера
<script type="text/javascript" src="/bitrix/templates/web-dev/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="jquery.orbit.min.js"></script>
Файл стилей
<link rel="stylesheet" href="orbit.css">
Настройки слайдера
<script> $('#featured').orbit({ animation: 'fade', //fade, horizontal-slide, vertical-slide animationSpeed: 800, // скорость анимации advanceSpeed: 4000, // скорость между переходами по таймеру startClockOnMouseOut: true, // таймер перезагрузится на MouseOut startClockOnMouseOutAfter: 3000, //через сколько старутет таймер, если мышка отведена. directionalNav: true, //подсказки при навигации captions: true, // заголовок будет подписью к картинке captionAnimationSpeed: 800, //как быстро загружать описание, как я понял: how quickly to animate in caption on load and between captioned and uncaptioned photos timer: false //если нужен таймер }); </script>
И сам html код orbit слайдера
<div id="orbitslider"> <img src="/demo/images/1.jpg" alt="первый слайдер" /> <a href="http://web-dev.vidshup.ru" target="_blank"><img src="/demo/images/2.jpg" alt="второй слайдер" rel="firstcaption" /></a> <img src="/demo/images/3.jpg" alt="еще 1 слайдер" /> <img src="/demo/images/4.jpg" alt="последний слайдер" rel="secondcaption" /> </div> <span class="orbit-caption" id="firstcaption">Описание для слайдера может быть и с линком <a href="http://web-dev.vidshup.ru" target="_blank">типа этого</a></span> <span class="orbit-caption" id="secondcaption">Еще одно описание <strong>Жир</strong></span>
Удачной установки и настройки