Резиновый jQuery слайдер на сайт

Горизонтальный резиновый jQuery слайдер изображений на сайт

Превосходная простая реализация резинового слайдера изображений. Слайдер крутится справа на лево по всей ширине монитора. Если вы посмотрите html код слайдера - вы обрадуетесь. Он очень легкий и понятный. Слайды идут друг за другом с равномерной скоростью (небольшой, но это можно изменить в файле js). Вся анимация работает на jQuery версии 1.3.2. Сам скрипт резинового слайдера называется jquery flexislider. Для одного моего проекта нужен был как раз такой слайдер (резиновый и сплошной, без рамок и расстояний между изображениями), я сначала поискал в интернете что-то типа этого, но не нашел. Начал делать сам, но неожиданно наткнулся на это решение.

Слайдер действительно очень легкий, аккуратный и неброский. Его можно использовать на сайте, как превьюшку ваших товаров. можно даже не ставит ссылки на них - это просто будет визуальная презентация вашей продукции, как бы вскользь. Такой слайдер служит на сайте для придания сайту динамики, живости. Он не прокручивается ни скролом, ни кнопками и может выступать как фоновый слайдер с резиновой растяжкой по ширине экрана. Этот jQuery слайдер можно применить, конечно же, не только к резиновым сайтам, но и сайтам с фиксированной шириной. Я собираюсь ешще немного переделать эту карусель изображений и использовать ее, как портфолио с ссылками на работы и слайд-шоу. Зделаю - выложу. А пока смотрите этот слайдер в работе и скачивайте его бесплатно с моего сайта.

Установка на сайт:
1. Скачайте архив и поместите папки их этого архива в корень вашего сайта.

2. Поместите вот этот код к себе на сайт между <head> и </head>, тем самом вы подключите js и css файлы:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.flexislider.js" type="text/javascript"></script>

3. Там где вы хотите видеть свой слайдер разместите вот этот html код:

<div id="slider">
<div id="imageloader">
<img src="images/ajax-loader.gif" />
</div>
<img src="images/sample1.jpg" />
<img src="images/sample2.jpg" />
<img src="images/sample3.jpg" />
<img src="images/sample4.jpg" />
<img src="images/sample5.jpg" />
<img src="images/sample6.jpg" />
<img src="images/sample7.jpg" />
<img src="images/sample8.jpg" />
<img src="images/sample9.jpg" />
<img src="images/sample10.jpg" />
<img src="images/sample11.jpg" />
<img src="images/sample12.jpg" />
</div>

Похожие статьи