Слайдер на jQuery
Встречаю в сети много разных слайдеров фоток и прочего контента на jQuery и других фреймворках. И давно зародилась мысль написать что-нибудь свое.
Вот наконец-то и руки до этого добрались =) Представляю вам свой небольшой слайдер на jQuery, который я назвал LiveSlider.
Постарался сделать максимально простую установку и использование плагина. работает с jQuery 1.2.3+ или более поздней версией.
Скачать плагин можно здесь: liveSlider-0.4.zip
Устанавливается следующим образом:
1) Загружаем папку liveSlider в папку сайта
2) Добавляем на страницу следующий код:
<link rel="stylesheet" type="text/css" href="/liveSlider/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/liveSlider/liveSlider.js"></script>
<script type="text/javascript">
var liveSlider;
jQuery(function($){
liveSlider = $('.gallery').liveSlider({
textCloseHeight: 35,
textOpenHeight: 130,
textOpacity: 0.7,
textOpened: true,
slideshow: true,
slideshowPeriod: 2000,
slidebycenter: true,
infinityNavigator: true
});
});
</script>
<!-- Добавить в место вставки слайдера, задает картинки и текст -->
<div class="gallery">
<div>text</div>
<img src="/image/1.jpg" />
</div>
<!-- Если нужно переключение на произвольную картинку - добавляем -->
<div>
<a href="" onclick="liveSlider.liveSlider('moveTo',1); return false;"><img src="/imagethumb/1.jpg"/></a>
<a href="" onclick="liveSlider.liveSlider('moveTo',2); return false;"><img src="/imagethumb/2.jpg"/></a>
</div>
А вот и живой примерчик:
Audi Lotus
Audi will build this car with collaboration with KTM, an Austrian motorcycle manufacturer. The very exclusive roadster will weight under 1,600 pounds and promises to be a real driver's car.
Bentley Continental
The Bentley Continental GT is a two-door "two plus two" grand touring coupe released in 2003, replacing the previous Rolls-Royce-based Continental R and T.
