Простой Слайдер картинок и контента (Deff)
Основные достоинста данных слайдеров:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров при использовании единственного скрипта (необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска)
Быстрый запуск.
Скрипт и стиль:
Туда, где нужен слайдер
Hастройка
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лайдера:
Первая цифра смены направления - 0 или 1
Вторая цифра примерно (от 0 до 800) - время анимации кадра
Вариант Кольцевого слайдера с возможностью автопрокрутки слайдов (ДЕМО кольцевого слайдера)
Установка та же самая, изменения в назначении параметров запуска функции.
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(660,4);</script>
1-я цифра: примерно от 0 до 800 - время анимации кадра
2-я цифра: время автопрокрутки в секундах (от 1 до 10). Если параметр не устанавливаем, автопрокрутки нет.
ВНИМАНИЕ! Для кольцевого слайдера заменяем скрипт:
Можно установить свои добавки стиля к мини-меню прокрутки:
Автоцентрирование кнопок по высоте
Автоскролл контента по высоте, при превышении размеров...
Возможность вложенности в таблицы с вкладками,
Возможность установки нескольких слайдеров при использовании единственного скрипта (необходима только смена ID слайдера в очередном контенте, и прописи этого ID в функции запуска)
Быстрый запуск.
Скрипт и стиль:
Код
<link rel="stylesheet" type="text/css" href="/slider/71526.css" />
<script type="text/javascript" src="/slider/sl.js"></script>
<script type="text/javascript" src="/slider/sl.js"></script>
Туда, где нужен слайдер
Цитата
<!-- Cлайдер -->
<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">
<!-- Две Кнопки слайдера -->
<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"/>
<!-- 1-й Контейнер слайдера -->
<div class="slider-content active">
1-й Контент
</div>
<!-- 2-й Контейнер слайдера -->
<div class="slider-content">
2-й Контент
</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content">
3-й Контент
</div>
</div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->
<div id="slider2" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">
<!-- Две Кнопки слайдера -->
<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"/>
<!-- 1-й Контейнер слайдера -->
<div class="slider-content active">
1-й Контент
</div>
<!-- 2-й Контейнер слайдера -->
<div class="slider-content">
2-й Контент
</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content">
3-й Контент
</div>
</div><script>$("#slider2").slideF();</script><!--//End Cлайдер -->
Hастройка
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"/>
- левая и правая кнопка слайдера, красным - ширина и ссылка на картинку.
значения ширины картинок лучше выставлять равные между собой и идентичные с размерами исходной картинки.
Очередную вкладку слайдера добавляем таким кодом:
Цитата
<!-- 4-й Контейнер слайдера -->
<div class="slider-content">
4-й Контент
</div>
<div class="slider-content">
4-й Контент
</div>
Красное - Ваш контент
Возможность смены направления движения и времени анимации слайда.
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
Цитата
<script>$("#slider2").slideF(0,700);</script>
Первая цифра смены направления - 0 или 1
Вторая цифра примерно (от 0 до 800) - время анимации кадра
Вариант Кольцевого слайдера с возможностью автопрокрутки слайдов (ДЕМО кольцевого слайдера)
Установка та же самая, изменения в назначении параметров запуска функции.
Дополнительные параметры прописываем в запуске функции, расположенной в конце cлайдера:
<script>$("#slider2").slideF(660,4);</script>
1-я цифра: примерно от 0 до 800 - время анимации кадра
2-я цифра: время автопрокрутки в секундах (от 1 до 10). Если параметр не устанавливаем, автопрокрутки нет.
ВНИМАНИЕ! Для кольцевого слайдера заменяем скрипт:
Цитата
<script type="text/javascript" src="/slider/sl2.js"></script>
Можно установить свои добавки стиля к мини-меню прокрутки:
Код
<style>
#indexActive{ /*Задаём Позицию индикаторов*/
position:absolute;
z-index:1000;
margin-left: [color=red]580[/color]px;
margin-top: -6px;
}
span[id^="active_Ind"]{ /*Фон и размеры индикатор*/
display:inline-block;
cursor:pointer;
float:right;
background:transparent url(http://s3.uploads.ru/geZ4A.png) no-repeat center top;
/*border:solid 2px blue!important;*/
height:11px;
width:10px;
padding:0 1px 0 1px;
margin:10px 6px;
}
span[id^="active_Ind"]:hover{ /*Индикатор при наведении */
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
box-shadow:1px 1px 4px #515F6C;
}
span[id^="active_Ind"].active{ /*Активный индикатор */
background-position: center -12px;
}
<style>
#indexActive{ /*Задаём Позицию индикаторов*/
position:absolute;
z-index:1000;
margin-left: [color=red]580[/color]px;
margin-top: -6px;
}
span[id^="active_Ind"]{ /*Фон и размеры индикатор*/
display:inline-block;
cursor:pointer;
float:right;
background:transparent url(http://s3.uploads.ru/geZ4A.png) no-repeat center top;
/*border:solid 2px blue!important;*/
height:11px;
width:10px;
padding:0 1px 0 1px;
margin:10px 6px;
}
span[id^="active_Ind"]:hover{ /*Индикатор при наведении */
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
box-shadow:1px 1px 4px #515F6C;
}
span[id^="active_Ind"].active{ /*Активный индикатор */
background-position: center -12px;
}
<style>
Просмотров: 628, Загрузок: 12, Оценка: 5.0 (1)
| Страницы: | |