Слайдер с динамической нумерацией страниц и кнопкой пауза плей
Область его применения не ограничивается показом картинок. В нее можно интегрировать любой контент: текст, ссылки, картинки.
Шаг 1.
Подключим к документу необходимые скрипты и CSS-стили галереи, для этого между тегами <head> вставим следующий код:
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.anythingslider.js" type="text/javascript"></script>Шаг 2.
Далее пропишем следующий скрипт:
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Старт", // Start text
stopText: "Стоп", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
От себя добавлю у меня были проблемы с этим скриптом при прикручивании к вамшопу (не помню теор. часть но посути при использовании jQuery переменные константы объявляются не через $ а jQuery ) , решил ее заменой $ на jQuery, тоесть переделаный вариант жава функции получился такой:
<script type="text/javascript">function formatText(index, panel) {
return index + "";
}
jQuery(document).ready(function() {
jQuery('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "", // Start text
stopText: "", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
jQuery("#slide-jump").click(function(){
jQuery('.anythingSlider').anythingSlider(6);
});
});
</script>Вы можете поменять параметры delay (он указывает на время задержки между показом двух слайдов), animationTime (он указывает непосредственно на процесс смены слайдов (анимацию)), а также можете заменить названия кнопок "Старт" и "Стоп" на свои слова, например "Начать" и "Закончить".
Чтобы убрать кнопки навигации по слайдам, значение buildNavigation следует установить в значение false.
Остальные параметры не так важны, но вы можете поэкспериментировать с ними.
Шаг 3.
В том месте, в котором вы хотите видеть галерею, следует вставить два блока, указав им следующие стили:
<div class="anythingSlider">
<div class="wrapper">
</div>
</div>Внутрь этих блоков следует вставить ненумерованный список. Каждый элемент галереи будет представлять отдельный элемент этого списка. Таким образом, код галереи примет следующий вид:
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul></div>
</div>
Шаг 4.
В каждый элемент <li></li> вы можете вставить любое содержимое:
а) Картинку:
<img src="images/slide-civil-1.jpg" alt="" />б) Блок с текстом:
<div id="quoteSlide">
<blockquote>Как создать сайт? Этот вопрос волнует сегодня миллионы умов по всему миру. Многие хотят создать сайт и зарабатывать на нём разными способами!</blockquote>
</div>Стиль quoteSlide прописан в файле page.css, Вы можете изменить стиль по Вашему желанию или написать свой.
в) Блок с текстом и изображением:
<div id="textSlide">
<img src="images/image.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
<h3>Сэндвич с томатами</h3>
<p>Текст</p>Этот блок оформляется аналогично, как и просто блок с текстом, только Вам нужно указать позиционирование для картинки.