18
Сен
2011
w411

Слайдер на jQuery

Встречаю в сети много разных слайдеров фоток и прочего контента на jQuery и других фреймворках. И давно зародилась мысль написать что-нибудь свое.

Вот наконец-то и руки до этого добрались =) Представляю вам свой небольшой слайдер на jQuery, который я назвал LiveSlider.

Постарался сделать максимально простую установку и использование плагина. работает с jQuery 1.2.3+ или более поздней версией.

Скачать плагин можно здесь: liveSlider-0.4.zip

Устанавливается следующим образом:
1) Загружаем папку liveSlider в папку сайта
2) Добавляем на страницу следующий код:

<!-- Добавить в head тег либо в место вставки слайдера -->
<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>

А вот и живой примерчик:

Hello LiveSlider!
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.

Добавить комментарий

Справка

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
Проверочный код
Вопрос необходим для предотвращения автоматического добавления комментариев.
Image CAPTCHA
Введите символы изображенные на картинке.

14 Комментариев

Андрей, пн, 09/19/2011 - 13:00

Видел много слайдеров, у этого как и у других, отсутствует возможность бесконечной прокрутки слайдов, т.е. когда после последнего слайда нажимаем next и переходим на первый слайд (так как будто первый слайд - следующий)

w411, пн, 09/19/2011 - 13:01

Добавил бесконечную прокрутку как отдельную опцию.
Обновил плагин до версии 0.4
Если хотите какую-нить фичу в плагине - пишите - добавлю!

Vitaliy89, пн, 09/19/2011 - 13:04

Сильно тормозит на ie8

Сергей, пн, 09/19/2011 - 23:47

Как добавить 2 слайда на одну страницу?

w411, вт, 09/20/2011 - 00:04
<!-- Инициализация слайдера -->
<script type="text/javascript">
jQuery(function($){
        $('.gallery_1').liveSlider();
        $('.gallery_2').liveSlider();
});
</script>
 
<!-- Данные -->
<div class="gallery_1">
    <img src="/image/1.jpg" />
    <img src="/image/2.jpg" />
    <img src="/image/3.jpg" />
</div>

<div class="gallery_2">
    <img src="/image/4.jpg" />
    <img src="/image/5.jpg" />
    <img src="/image/6.jpg" />
</div>

Сергей, вт, 09/20/2011 - 00:15

Спасибо уже разобрался, теперь другой вопрос стоит, как сделать клинкабельной картинку?

w411, вт, 09/20/2011 - 00:26

1) Параметр инициализации slidebycenter: false
2) В списке картинок <img src="/image1.jpeg" onclick="window.open('http://yandex.ru')">
Как-то так =)

w411, вт, 09/20/2011 - 00:32
<div class="gallery">
<div><a href="http://site1.ru" target="_blank"><img src="image1.jpeg"></a></div>
<div><a href="http://site2.ru" target="_blank"><img src="image2.jpeg"></a></div>
</div>

Сергей, вт, 09/20/2011 - 00:37

Спасибо БОЛЬШОЕ! 2 дня мучился, а тут на вас наткнулся и всё стало ясно!

Сергей, вт, 09/20/2011 - 13:21

Ещё пару вопросов:
Как настроить окно подписи? (сделать по меньше и выровнять текст)
Можно ли менять эффекты? (например что бы листалось не в бок а с верху?)
Заранее при много благодарен!!!

w411, вт, 09/20/2011 - 18:58

1) Для управления окном подписи используйте параметры
textCloseHeight: 35 - высота текстовой панели в свернутом состоянии
textOpenHeight: 130 - высота текстовой панели в развернутом состоянии
textOpacity: 0.7 - прозрасность панели
textOpened: 1 - состояние панели при загрузке слайдера (1/0 - открыта/закрыта)
2) Второй вопрос не понял
речь идет о перемещении кнопок навигации вверх? или о прокрутке слайдов вниз/вверх?

Сергей, вт, 09/20/2011 - 19:45

Спасибо, буду пробовать с окном, про 2-й вопрос, я имел в виду сам эффект слайдшоу! И за одно как убрать навигацию? :) Спасибо огромное заранее!

w411, вт, 09/20/2011 - 21:45

Убрать навигацию - опция navigator: 0
Эффект навигации пока только один (листалка влево/вправо)

Сергей, вт, 09/20/2011 - 22:49

Спасибо!