Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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 для загрузки архива с исходниками слайдера.

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

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

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

 

6 thoughts on “Skitter слайдер jquery”

  1. Саша:

    Спасибо за подробную инструкцию! Слайдер действительно очень легкий в установке и с богатым функционалом .

  2. Maks:

    Суперской слайдер всегда им пользуюсь! Кстати вы забыли написать что есть плагин для WP, хотя на скрине все видно но решил написать если кто-то не заметил.

  3. Alex:

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

  4. Виктор:

    Добрый день. Подскажите, что значит «в соответствии с вашим кодом». И куда копировать на сайт? Спасибо.

    1. admin:

      Скопировать сгенерированый для Вас код на сайте слайдера, тот что на скрине выделен.

  5. Светлана:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X