Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Skitter слайдер jquery

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

Вот какие плюсы имеет этот слайдер:

  1. его очень просто настроить и установить;
  2. у него есть 38 разных эффектов анимации при переключении слайдов;
  3. слайдер имеет два типа загрузки html и xml;
  4. возможность установки нескольких слайдеров на одной странице;
  5. есть возможность выбрать один из четырех видов навигации;
  6. можно подключать дополнительные функции, например такие как пауза слайда и тд.

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

Еще одним плюсом считаю большой выбор эффектов анимации  (как я уже писал выше, их число составляет 38 ). Их здесь вполне достаточно, и выбрать можно на любой вкус.

Также очень красиво смотрится навигация, все очень стильно и удобно.

И так, если вы хотите установить данный слайдер, вам нужно сделать несколько шагов, чтобы установить его себе на сайт.

ШАГ №1

Перейдите на страницу слайдера. Вы увидите следующее:

jquery sliderjquery slider

Чтобы настроить вид слайдера и эффекты анимации нужно нажать на кнопку настроек которая находиться под слайдером (Customize the features!). После чего вы увидите все настройки слайдера:

sliderslider

ШАГ №2

Активным пунктом меню будет Анимация (Animation). Сразу под ним вы увидите все доступные эффекты переключения слайдов. Чтобы выбрать один из них (или несколько), просто нажмите на нужное название. После этого, с правой стороны рядом с меню появиться кнопка подтверждения выбранных эффектов. После нажатия слайдер будет использовать их при смене слайдов чтобы вы могли визуально все оценить.

 

jquery sliderjquery slider

ШАГ №3

Если вы выбрали нужную анимацию, то перейдем к выбору загрузки (Loading). Если вы хотите чтобы код слайдера (ссылки на изображения слайдера) находился в коде вашей страницы нужно выбрать html. А если хотите в отдельном файле то нужно выбрать xml. (Я использую первый вариант) После выбора нужного пункта незабываем его подтвердить.

jquery sliderjquery slider

ШАГ №4

Далее переходим к выбору Навигации (Navigation). Здесь у вас есть четыре варианта для выбора:

  1. Numbers — навигация будет представлена в виде цифр.
  2. Thumbs — навигация будет в виде миниатюр изображений.
  3. Dots — навигация будет иметь вид точек.
  4. Dots with preview — это смешанный вид точек и миниатюр. (при наведении на точку вы сможете увидеть миниатюру соответствующего слайда).
jquery slider jquery slider

ШАГ №5

Если вы выбрали нужный вид навигации то следующим шагом будет настройка возможностей слайдера. У данного слайдера есть дополнительные функции и их настройка, для этого нужно перейти к следующему пункту — Настройки (Options). Здесь вы увидите следующие настройки:

  1. Hide tools — спрятать все панели (кнопки вперед — назад, навигацию, паузу).
  2. Randomly Sliders — Включить функцию случайного слайда (изображения будут переключатся в случайном порядке).
  3. Play/Pause — этот пункт всегда активен, он выводит кнопку паузы слайда. Но при наведении на него вы увидите выпадающее меню с помощью которого можно указать в каком месте будетрасполагаться данная кнопка.
  4. Focus Slideshow — при выборе данного пункта появиться возможность смотреть слайды в модальном окне. (также можно выбрать расположение кнопки на слайдере).
  5. Numbers/dots align — позволяет выбрать расположение навигации (только для цифр и точек).
  6. Progress Bar — при выборе этой опции, на слайдере появится полоса загрузки следующего слайда.
  7. Enable Navigation Keys — если вы активируете этот пункт то сможете переключать слайды с помощью клавиш (вперед, назад).

slider jqueryslider jquery

ШАГ №6

Следующим по списку идет пункт меню Просмотр (Views) — он служит для того чтобы показать как можно еще использовать этот слайдер. К нашим настройкам он не относиться поэтому мы переходим к завершающему шагу — Your code (Ваш код). Это код, который сгенерировался после выбора нужных вам настроек. Теперь вам нужно просто копировать его и вставить на нужную страницу вашего сайта.

СлайдерСлайдер

Но как видите в коде есть ссылки на скрипты, которые необходимы для работы слайдер. Скачать их можно на этом же сайте. Нужно просто нажать на кнопку Download (загрузить) в главном меню сайта, и нажимаем на кнопку Stable version для загрузки архива с исходниками слайдера.

Когда архив загрузится, скопируйте нужные вам скрипты (в соответствии с вашим кодом) к себе на сайт.

На этом все. Пользуйтесь и наслаждайтесь :). Если есть вопросы, задавайте их в комментариях.

Больше слайдеров по этой ссылке