Очень простой в использовании JavaScript слайдер, анимирует не только картинки, но и любые блоки. Этот слайдер отлично подойдет если нужно анимировать блоки, на которые ссылаются   jQuery скрипты или внутри элементов используются другие скрипты. Slider DIX не создает новые теги, а анимирует уже существующие, поэтому все скрипты связанные с внутренними тегами будут отлично работать.

Slider DIX легко сделать адаптивным или задать фиксированный размер с помощью CSS стилей. В текущей версии доступны 3 анимации: смещение, исчезновение и плавный переход. Но слайдер постоянно развивается и пополняется новым функционалом.

Скачать Slider DIX 1.9  Демо 

Чтобы добавить слайдер на сайт нужно в теге <head> добавить jQuery библиотеку, сам слайдер и CSS стили.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>

<script language="JavaScript" type="text/javascript" src="/slider_dix/slider_dix.js"></script>

<link href="/slider_dix/styles.css" rel="stylesheet"/>

Теперь в документ можно добавить элемент с уникальным классом или id, в котором будут  использоваться элементы для анимации.

<div class="slider-dix">

                <img src="/image/1.jpg" />

                <img src="/image/2.jpg" />

                <img src="/image/3.jpg" />

                <img src="/image/4.jpg" />

                <img src="/image/5.jpg" />

                <img src="/image/6.jpg" />

                <img src="/image/7.jpg" />

</div>

И ниже код для запуска анимации:

<script language="JavaScript" type="text/javascript">

                jQuery('.slider-dix').SliderDIX() ;

</script>

 

Вот и все, самый простой слайдер готов☺.

Сейчас когда скобки после SliderDIX пусты, слайдер использует настройки по умолчанию. В анимации участвует только тег <img>, с интервалом 1000 мс (миллисекунды), задержка между анимациями 2000 мс и задержка после наведения на картинку 5000мс.

Параметры слайдера можно менять, например чтобы изменить элементы для анимации на тег с классом .el:

<div class="slider-dix">

                <div class="el"><img src="/image/1.jpg" /></div>

                <div class="el"><img src="/image/2.jpg" /></div>

                …

</div>

 

<script language="JavaScript" type="text/javascript">

                jQuery('.slider-dix').SliderDIX({'element':'.el'}) ;

</script>

Параметры слайдера:

element – элементы участвующие в анимации

interval – скорость анимации

auto – пауза между анимациями , 0 – отключена автоматическая анимация

look – задержка после клика по элементу.

prev – кнопка для смещения назад.

next – кнопка для смещения в перед

jQuery('.slider-dix').SliderDIX({'element':'.el','auto':3000, 'interval':1000, look:10000}) ;

'auto':0 отключить автоматическую анимацию слайдера.

 

Для разных анимаций доступны 3 функции:

SliderDIX – смещение

SliderDO –исчезновение

SliderDExtinction – плавный переход.

 

Пример плавной смены картинок:

jQuery('.slider-dix').SliderDExtinction({'element':'.el', auto:10000,interval:1000,}) ;