Easy Slider 1.7 — Навигационный jQuery Слайдер от Алена Гракалика

1 872

Сегодня вам покажем новый Easy Slider 1.7 от Алена Гракалика с двумя новыми особенностями.

Фишки следующие:

  • цифровая навигация (как альтернатива кнопкам «предыдущий/следующий»)
  • непрерывная прокрутка (continuous scroll) вместо переходов к первому (или последнему) слайду.

Вы можете выбирать между классической навигацией « предыдущий/следующий» или цифровой навигацией страниц.

Вторая фишка — непрерывное прокручивание. Облегчает жизнь тем, что сама прокручивает весь ряд картинок обратно до самого начала или наоборот.

Скачать (.zip, 170 Кб)

Опции

Итак, давайте пробежимся по всем опциям. Для вашего удобства, оставлены опции из предыдущей версии этого плагина. Таким образом, у вас все будет находится в одном месте. Вот и они со значениями по умолчанию:

  • prevId

    Идентификационный номер (id) для «previous» (предыдущей) кнопки. Значение по умолчанию «prevBtn».

  • prevText

    Внутренний текст для «previous» (предыдущей) кнопки. Значение по умолчанию «Previous».

  • nextId

    Идентификационный номер (id) для «next» (следующей) кнопки. Значение по умолчанию «nextBtn».

  • nextText

    Внутренний текст для  «next» (следующей) кнопки. Значение по умолчанию «Next».

  • orientation

    Показ слайдов может быть горизонтальным и вертикальным. По умолчанию стоит горизонтальный (horizontal), если хотите, можете сделать его «vertical».

  • speed

    Скорость показа слайдов в миллисекундах, значение по умолчанию 800.

  • controlsShow

    По умолчанию задано «true», но, если поставить «false», то  не добавиться никаких средств управления. Этот контрол можно использовать вместе с авто прокруткой, когда вы хотите отключить пользовательское взаимодействие.

  • controlsBefore and controlsAfter

    В случае, если вы хотите добавить некоторую дополнительную разметку, чтобы получить больше контроля над кнопками, вы можете сделать это, используя данные параметры. Посмотрите демонстрационный пример, где я использую эти опции.

  • controlsFade

    По умолчанию стоит 'true'. Если поменять на 'false', то выключится скрытие кнопки, когда слайд шоу достигнет конца.

  • firstShow and lastShow

    Эти параметры скроют (или покажут) кнопки: «перейти к первому» («go to first») и «перейти к последнему» («go to last»).

  • auto

    Эта опция включает автоматический показ слайдов. Если вы зададите ей 'true', показ слайдов начнется  автоматически и будет работать, пока пользователь не нажмет какую-нибудь из кнопок.

  • pause

    Эта опция измеряется в миллисекундах, и она задает продолжительность показа каждого слайда, когда плагин настроен на автопоказ слайдов.

  • continuous

    Если эта опция установлена 'true', то щелчок по «следующей кнопке»(next button), когда слайд шоу достигнет конца, просто запустит показ всех слайдов сначала. Совмещая эту опцию с  'auto' (обе сделать 'true'), вы получите непрекращающуюся анимацию.

  • numeric (NEW!)

    Если вы зададите эту опцию 'true', вы получите цифровую навигацию вместо кнопок 'предыдущий/следующий' (next/prev). Плагин создаст нумерованный список (ordered list), сразу после тега показа слайдов div. У нумерованного списка количество элементов равно количеству сладов (из слайд шоу). Щелчок по любому из номеров создаст анимацию перехода к слайду с таким же номером.

  • numericId (NEW!)

    Эта опция определяет идентификационный номер для нумерованного списка. Вам следует использовать её для того чтобы выбрать и задать стиль данного списка, с использованием CSS.

Примеры

Здесь представлены 3 демонстрационных примера:

Continuous slideNumeric navigationДва в одном


Возможно, Вам будет интересно ↓↓↓

20 комментариев на “Easy Slider 1.7 — Навигационный jQuery Слайдер от Алена Гракалика”

  1. Доброго времени суток. Скрипт очень классный. Мне понравился. Но у меня есть небольшой вопрос. Объясните пожалуйста как сделать чтобы в конце слайдов оно не перематывало на начало, а просто показывало с самого начала.

    Заранее спасибо.

  3. Добрый день, а как его реализовать на WP ? Я в принципе уже поставил себе на блог, только он не отображает самих картинок... почему ?

  4. Наверное все дело в пути

    если у вас путь допустим images/01.jpg,

    то в корне сайта должна быть папка images с картинками внутри.

    Если путь не относительный, а полный ,

    то проблем быть не должно.

  5. Та же проблема поставил в превью картинки показывает (лежат в папке images плагина), а вот при установке кода сам каркас есть а картинок нет(( говорят может конфликтовать с библиотекой какого нибудь плагина использующей jQuery проверил вроде таких нет! как быть подскажите???

  6. Отличный слайлер, но не работает в ie7

    Отображаются просто картинки в столбик

    Можно как-то решить такую проблему?

    • Встречный вопрос.

      Вы используете свой скрипт?

      Если да, то можно на него ссылку, чтобы глянуть в чем проблема. Так сразу и не скажешь в чем проблема.

    • Уберите запятую после последнего свойства в опциях. По крайней мере, у меня после этого заработало.

      п.с. хотя помнится, какой-то скрипт в ие наоборот, без запятой у последней опции не хотел работать.

  7. Подскажите пожалуйста!

    Как сделать, чтобы при загрузке страницы с этим слайдером, он автоматически был не на первом элементе, а на любом другом?

  8. Есть ли какие-то обработчики событий или методы управления? Например, чтоб из своего кода можно было сделать что-то типа «.nextSlide ()» и происходило перелистывание?

  9. Доброй ночи. Интересует следующий вопрос. Мне понадобилось прикрутить на слайдере кнопку play/pause. Есть ли такая возможность у вашего слайдера? Можно ли как-то управлять параметром «auto»?

  10. Отличный слайдер, за него огромное спасибо автору. Однако, не смотря на все достоинства, у слайдера есть один очень существенный недостаток: отсутствие динамической подгрузи изображений (т.е. все изображения отправляются в загрузку сразу при открытии страницы сайта), что создает существенную нагрузку на сервер и сильно тормозит загрузку страницы, если картинок в галереи много.

    Плагин Lazy Load, для jQuery, может решить эту проблему, как подружить его со слайдером?

    • к сожалению данный слайдер не совсем подходит для большого количества изображений. И Lazy Load к нему скорее всего не подойдет, потому как этот плагин работает по иному принципу (не использует в определении видимости изображений css-свойства hide, а именно это свойство используется в слайдере).

      Так что вам нужно искать в направлении ajax слайдеров.

  11. Добрый день. Решил использовать данный слайдер для вывода «Новостей»

    на сайте используется Smarty шаблонизатор. при перелистывание тем слайдер начинает перелистывать группой

    www.business-part.ru/proekty_new/index.htm

  12. Добрый вечер,

    спасибо за замечательный слайдер!

    Но у нас возникли такие проблемы, после того как изменили размер слайдера с оригинального на 905Х360 он останавливается не по центру изображения а на половину следующей, потом на конце следующей картинки и т.д. Может нужно скорость уменьшить?

    Скажите пожалуйста, как можно решить эту проблему.

    Спасибо

  15. Доброй ночи! Хороший скрипт,но на данном этапе возник вопрос: изменился цвет фона на сайте с белого на серый и в Опере появилась белая линия вверху по контору след. картинки, которая перемещается вдоль всей страницы слева и справа от слайдера. В других браузерах все работает хорошо. С ней что-то можно сделать?

    Спасибо!

  16. Единственное достоинство — легкость и компактность кода, не тормозит.

    На оригинальной странице накидали массу вариантов усовершенствования еще в 2009м г. cssglobe.com/easy-slider- ...n-jquery-slider/

    У меня основная претензия — после next, prev или перехода по цифрам автопоказ вырубается, мне пришлось допиливать исходный код, чтобы это пофиксить

Оставить комментарий