AnythingSlider

Queenie's Killer Tomato Bagel Sandwich

Ingredients
- 1 bagel, split and toasted
- 2 tablespoons cream cheese
- 1 roma (plum) tomatoes, thinly sliced
- salt and pepper to taste
- 4 leaves fresh basil
In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.
-- Les Dawson
Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.

- Chikezie Ejiasi

Возможности

В качестве слайда может быть любое HTML-содержимое (картинки, текст)
Стрелки вперед/назад (отключаются)
Навигационная панель (добавляется динамически в зависимости от количества слайдов)
Дополнительные функции для форматирования текстов для панели навигации
Автовоспроизведение (можно включать и выключать вручную)
Каждый слайд имеет свой хэштег (можно использовать отдельные ссылки для каждого слайда)
Замкнутый слайдер (направление слайд-шоу не меняется при достижении последнего слайда)
Можно использовать несколько слайдеров на одной странице (хэштеги работают только на первой)
Пауза при наведении мыши на слайдер (опционально)
Ссылка на конкретный слайд со статической текстовой ссылки - смотри Slide 4 (Quote #2) во втором примере.
Опционально можно менять размеры каждого слайда (задаются размеры каждого слайда в css).
Встроенная поддержка клавиатурных клавиш вперед и назад и Tab.
Воспроизведение видео YouTube ставится на паузу, если слайд не виден, и включается снова, когда виден на экране.
Опционально можно воспроизвести слайды один раз и остановиться на последней странице.

Настройки по умолчанию

$('#slider1, #slider2').anythingSlider({
  // Внешний вид
  width               : null,      // Override the default CSS width
  height              : null,      // Override the default CSS height
  resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport

  // Navigation
  startPanel          : 1,         // Устанавливает начальный слайд - This sets the initial panel
  hashTags            : true,      // Should links change the hashtag in the URL?
  buildArrows         : true,      // Стрелки навигации - If true, builds the forwards and backwards buttons
  buildNavigation     : true,      // If true, buildsa list of anchor links to link to each panel
  navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
  forwardText         : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  backText            : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)

  // Slideshow options
  autoPlay            : true,      // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
  startStopped        : false,     // If autoPlay is on, this can force it to start stopped
  pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
  resumeOnVideoEnd    : true,      // If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video has completed
  stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page
  playRtl             : false,     // If true, the slideshow will move right-to-left
  startText           : "Start",   // Start button text
  stopText            : "Stop",    // Stop button text
  delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
  animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
  easing              : "swing"    // Anything other than "linear" or "swing" requires the easing plugin
});

Использование

Получить номер текущего слайда:

var current = $('#slider1').data('AnythingSlider').currentPage; // returns page #

Setting current slide (external link example):

<a href="#" id="slide-jump">Slide 4</a>

$("#slide-jump").click(function(){
  $('#slider2').anythingSlider(4);
});

External Slideshow Control

$('#slider1').data('AnythingSlider').startStop(true);  // start the slideshow
$('#slider2').data('AnythingSlider').startStop(false); // stops the slideshow
$('#slider1').data('AnythingSlider').goForward();      // go forward one slide
$('#slider1').data('AnythingSlider').goBack();         // go back one slide

Formatting Navigation Text
To use the navigationFormatter option, you must have a function that accepts two parameters, and returns a string of HTML text.
- index = integer index (1 based);
- panel = jQuery wrapped LI item this tab references.
- Function must return a string of HTML/Text.
- Here is a sample formatter (view this page source for another example):
```
$('#slider').anythingSlider({
 navigationFormatter : function(index, panel){
  return " Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
 }
})
```

Changelog

Version 1.4

Added maxOverallWidth option. This sets the max width (in pixels) of all combined sliders (side-to-side) due to problems with Opera.
Added new classes to the base UL ("anythingBase") and its immediate children LIs ("panels") to reduce and clarify the CSS.
Added hover class to arrows and start/stop button to indicate the link has focus (while tabbing through the page)
Fixed flickering problem completely :P - numerous changes made to script & CSS
Bumped version to 1.4 because of significant differences from version 1.3

Подключение

Подключаемм необходимые скрипты и CSS-стили в <head>:

<link rel="stylesheet" href="page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.2.js"></script>
<script src="jquery.anythingslider.js" type="text/javascript"></script>

Далее на странице прописываем сценарий:

 <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>

Вы можете поменять параметры delay (время задержки между двумя слайдами), animationTime (время на смену слайдов), названия кнопок "Старт" и "Стоп"". Чтобы убрать кнопки навигации по слайдам, значение buildNavigation следует установить в значение false.

В том месте, где должен быть слайдер, вставляем блоки со стилями

Внутри блоков используется ненумерованный список. Каждый элемент слайдера будет представлять отдельный элемент этого списка.