Простой Слайдер картинок и контента
Автор: Deff
Платформа: любая
Основные достоинста данных слайдеров:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров при использовании единственного скрипта(необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска
Быстрый запуск.
В HTML верх
Туда, где нужен слайдер
slider2 - красным жирным - уникальный id cлайдера(*прописывается дважды в начале и конце),
если слайдеров несколько, для каждого свой<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0"> - красным: прописываем свои цифры ширины и высоты слайдера;
padding:0 - отступ контента от краёв, обычно при вставке фоновой картинки вместо 0 - прописываем 12px<img button-width="42" class="button-left hide" src="http://s3.uploads.ru/KcP7S.png"/>
<img button-width="42" class="button-right" src="http://s2.uploads.ru/aIH0D.png"/>
- левая и правая кнопка слайдера, красным - ширина и ссылка на картинку,
значения ширины картинок лучше выставлять равные между собой и идентичные с размерами исходной картинкиОчередную вкладку слайдера добавляем таким кодом:
Красное - Ваш контент
Возможность смены направления движения и времени анимации слайда:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(0,700);</script>
Первая цифра - смена направления - 0 или 1
Вторая цифра примерно от 0 до 800, - время анимации кадра
Вариант Кольцевого слайдера с возможностью автопрокрутки слайдов:
Установка та же самая, изменения в назначении параметров запуска функции.
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(660,4);</script>
1-я цифра: примерно от 0 до 800 - время анимации кадра
2-я цифра: время автопрокрутки в секундах (от 1 до 10) (Если параметр не устанавливаем, - автопрокрутки нет.)
ВНИМАНИЕ! Для кольцевого слайдера меняем в HTML верх строку:
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>
на
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>
Можно установить свои добавки стиля к мини-меню прокрутки:
Добавлена возможность смены направления движения и времени анимации слайда:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(0,700);</script>
Первая цифра - смена направления - 0 или 1
Вторая цифра примерно от 0 до 800, - время анимации кадра
Добавлен новый Вариант Кольцевого слайдера, с возможностью автопрокрутки слайдов:
Установка та же самая, изменения в назначении параметров запуска функции:
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(660,4);</script>
1-я цифра - цифра примерно от 0 до 800, - время анимации кадра
2-я цифра, 4 - время автопрокрутки в секундах(от 1 до 10), (Если параметр не устанавливаем, - автопрокрутки нет.
Для кольцевого слайдера меняем в HTML верх строку
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/78275.js"></script>
на
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>
Можно установить свои добавки стиля к мини-меню прокрутки
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.