Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Как начать использование слайдеров jQuery в ваших проектах

by
Length:LongLanguages:

Russian (Pусский) translation by Svetlana (you can also view the original English article)

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


Немного фона 

Когда-то, изображение в Интернете просто имело один из способов показать: как плоский JPG, GIF или PNG. Когда-то несколько лет назад изображения начали изучать новые трюки; Они собрались вместе и начали появляться в слайдерах jQuery с аплодисментами посетителей по всему миру.

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

Если есть одна вещь, которую слайдеры jQuery не имеют, это последовательное имя. Ползунок имеет широкий спектр псевдонимов: галерея, карусель, промо и ротаторы, но все они обеспечивают одну и ту же общую функцию - отображение нескольких элементов контента в общем пространстве на странице. Для целей этой статьи я буду называть их всех «слайдером».

Ползунки jQuery можно использовать практически для всего, но большинство из них используется для отображения нескольких фотографий в формате слайд-шоу таким образом, который ранее обрабатывался Adobe Flash. Многие из них предлагают ряд эффектов перехода между слайдами и могут управляться с помощью предыдущих / следующих кнопок, навигации с вкладками или эскизов.


Популярные стили jQuery Sliders

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

.Давайте рассмотрим несколько более популярных стилей слайдеров ниже. Имейте в виду, что большинство примеров показано из незанятых демо-версий, и все они могут быть настроены с использованием некоторых базовых знаний CSS и чтения документации.

Стандартный слайдер фотографий

jquery photo slider
Пример использования: NivoSlider - http://nivo.dev7studios.com/

Очень популярным стилем слайдера является слайдер фотографий. Многие принимают изображение и некоторые метаданные, такие как заголовок, которые часто вытягиваются из тега alt или title автоматически.

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

Недостатки: если у вас есть широкий спектр контента, который вам нужно отображать, например, HTML, изображения или видео, то может быть лучше выбрать слайдер смешанного контента - большинство из них требует, чтобы вы придерживались изображений.


Смешанный слайдер содержимого

jquery mixed contentslider
Пример использования: Anything Slider - http://github.com/chriscoyier/AnythingSlider

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

Преимущества: Идеально подходит для отображения видео, HTML и содержимого изображения в пределах одного слайдера, если это необходимо.

Недостатки: слайдеры смешанного контента могут быть немного более продвинутыми для работы, чем ваш стандартный слайдер фотографий.


Стиль слайдера галереи

jquery gallery slider
Пример использования: Galleria - http://devkick.com/lab/galleria/

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

Преимущества: Очень легко пользователям легко просматривать изображения, которые они хотят видеть быстро.

Недостатки: часто занимает больше недвижимости на странице, чем стандартный слайдер, чтобы соответствовать изображению и всем эскизам.


3D-слайдер блока 

3d Block slider Cu3er cuber
Пример использования: Cu3er - http://getcu3er.com/

Подумайте о кубе Рубика, построенном в Интернете, без всех головных болей. Это в основном то, что 3D Block Slider - это невероятно впечатляет с визуальной точки зрения и может быть идеальным, чтобы добавить этот дополнительный бит волнения на сайт.

Преимущества: один из самых визуально потрясающих слайдеров. Если посетители не видели этого раньше, их челюсти могут упасть на пол.

Недостатки: в то время как остальные слайдеры в этом учебнике - jQuery, большинство 3D-слайдеров построены в сочетании с Adobe Flash и XML ... который не является самым «стандартным» форматом. Эти ползунки могут потребовать немного больше времени для «предварительной загрузки»; Поскольку они построены с помощью Flash,это также означает, что их можно немного сложнее установить, если вы не знакомы с ним.


3D-слайдер

jquery coverflow slider
Пример использования: поток изображений - http://cool-javascripts.com/effects/image-flow-09.html

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

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

Недостатки:Многие из них имеют небольшую полосу прокрутки или используют колесо прокрутки мыши или клавиатуру для просмотра изображений, которые могут быть немного неудобными с некоторой непреднамеренной прокруткой.


Полный размер Слайдера

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

Преимущества: Если у вас есть стиль «идти побольше или идти домой», они действительно не намного больше, чем это.

Недостатки: им может быть сложно интегрироваться в сайт, поскольку они предназначены для заполнения экрана вашей работой. Используемые изображения должны быть достаточно большими, чтобы заполнять новые экраны с высоким разрешением.


Миниатюрный Slider

jquery thumbnail slider
Пример использования: jCarousel Lite - http://www.gmarwaha.com/jquery/jcarousellite/

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

Некоторые слайдеры имеют возможность показывать сразу несколько изображений на слайд или несколько слайдов, поэтому проверьте список функций. В jCarousel Lite, показанной выше, «видимый» установлен в 3, показывая три слайда за раз.

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

Недостатки: Существует не так много недостатков для этого стиля, кроме как просто немного сложнее настроить, чем стандартный слайдер фотографий.


Горизонтальные раздвижные вкладки / аккордеонный слайдер

jquery accordion tabs slider
Пример ползунка используется: HSlides - http://plugins.jquery.com/project/hslides
Пример изображения — от Circo темы: http://bannersmonster.com/themes/Circo/

Стиль аккордеона позволяет просматривать элементы с некоторыми элементами, как перелистывание страниц книги. Это использует классическое поведение пользователя «скрыть и раскрывать», просто показывая фрагмент содержимого, прежде чем сдвинуть весь блок аккордеона.

Преимущества: очень уникальный и интересный способ отображения ваших товаров. Пошаговый стиль может помочь укрепить чувство порядка, если вы используете парадигму контента «шаг 1, шаг 2, шаг 3».

Недостатки: не очень подходит для десятков слайдов, и для новых веб-пользователей может быть немного сложно работать с случайно перемещающимися предметами, открытыми и закрывающимися с помощью мыши. Рассмотрим щелчок, чтобы открыть стиль вкладки или параметр, если он доступен.


Большой вкладной слайдер

jquery large tabbed slider
Пример использования: Список функций - http://jqueryglobe.com/article/feature-list

Чувство, что вы получаете при использовании большого ползунка с вкладками - это простота - шаг 1, шаг 2, шаг 3. Отличный способ показать прогрессивные изменения, функции или варианты продукта.

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

Недостатки: вам может потребоваться ограничить количество элементов, которые вы хотите включить, если вы не используете слайдер с вкладками, такой как iTunes Music Store.


Когда нужно создать свой собственный слайдер

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

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

Рассекайте существующие слайдеры, посмотрите, как они работают и учатся на нем. Не украдите код другого разработчика, а сосредоточьтесь на том, что они делают: анимации, изменение непрозрачности и просмотр настроек, которые они предлагают, и написать их по-своему.

С помощью таких инструментов, как Firebug, вы можете «проверять» ползунок в режиме реального времени, наблюдая за тем, как он манипулирует z-индексом, непрозрачностью или позиционированием для перемещения содержимого с одного слайда на другой.

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


Поиск правильного слайдера jQuery для вас

Единственное, что больше, чем количество ползунков jQuery, - это количество сайтов, демонстрирующих их. Вместо того, чтобы пытаться перечислить все из них здесь (новые выходят каждую неделю!), Давайте рассмотрим, как найти тот, который подходит именно вам:

Быстрый поиск Google выявит, что ползунки можно найти в самых разных местах:

Раундап сообщения

Часто называется «25 полезных jQuery Content Slider Scripts» - это сообщения, созданные для сбора и просмотра различных слайдеров, доступных в то время. Читайте комментарии, а также статью, чтобы узнать мнение других людей о коллекции.

Учебные сайты 

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

Интернет-магазины

CodeCanyon предлагает целую категорию для премиальных слайдеров. https://codecanyon.net/category/javascript/sliders

Вид источника

Иногда вы сталкиваетесь с сайтом с помощью слайдера, и вы хотите увидеть, какой плагин они могли использовать. Поскольку JavaScript является клиентским сценарием, создайте источник просмотра страницы и посмотрите, какие файлы JavaScript импортированы,информация о плагине должна быть включена в начало исходного скрипта плагина с URL-адресом для получения дополнительной информации о плагине для загрузки и документации.

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


Решение о слайдере

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

После того, как вы сузили свой выбор, сравните общий размер скрипта и проверьте, совместим ли он со всеми браузерами.

Некоторые слайдеры предлагаются в «облегченной» версии, такой как jQuery Cycle Lite, если вы хотите сохранить общий размер файла в своем проекте. Часто в световой версии просто отсутствуют дополнительные эффекты перехода, поддерживающие самые популярные доступные опции.

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


Обрезка слайдера 

Одна из замечательных особенностей использования предварительно сделанного слайдера заключается в том, что большинство из них невероятно легко перепроектируют в соответствии с вашими потребностями. Этот процесс (обычно называемый «скиннинг») не так сложно, как может показаться. Обычно для этого требуется просто отредактировать простой файл CSS - наиболее сложная скининг, как правило, будет заключаться в замене графики, что вы создали свою графику по умолчанию (например, фоны и кнопки).

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


Интеграция слайдеров с существующим сайтом

Размещение слайдера в существующем дизайне не является одношаговым процессом, но большинство сценариев слайдера снабжаются базовой примерной страницей для начала работы, импортированием jQuery, CSS, образцом примера и инициализацией плагина с настройками по умолчанию.

Давайте импортируем цикл jQuery в быстрый сайт-образец, созданный для целей этого руководства.

Загрузите до и после сайтов, чтобы следовать.


1. Начальная структура сайта

Демо-сайт состоит из базового HTML, CSS и изображения, которое станет отправной точкой для интеграции слайдера.

  • index.html - Исходная страница примера, которую мы используем
  • CSS/Screen.CSS - общий стиль информации
  • Images/sample_water.jpg - текущего статического изображения для домашней страницы

2. Загрузите цикл jQuery

Мы будем интегрировать плагин jQuery Cycle для этой демонстрации.

  • Посетите http://jquery.malsup.com/cycle/
  • Скачайте и распакуйте последнюю версию на свой компьютер.
  • Скопируйте jquery.cycle.all.min.js на свой сайт в новый каталог /js/

3. Импорт необходимых сценариев

Импорт библиотеки jQuery и цикл плагина в

вашего сайта, добавив этот код:

Первый скрипт должен быть последней версией jQuery. Вы можете захватить его с jquery.com или загрузить его из Библиотеки Google, как мы это делали выше.

Второй скрипт - это источник плагина, который мы разместили в папке / js /.


4. Добавьте ползунок HTML

Поменяйте текущее статическое изображение sample_water.jpg, используемое на демо-сайте, с неупорядоченным списком для слайдов:

Мы просто используем три изображения для начала, обратите внимание на атрибут id = "promo", мы будем использовать это позже, чтобы сообщить нашему плагину, что это контейнер наших слайдов. Поскольку слайды - это, по сути, просто список связанных материалов, то UL-тэг - хороший выбор.


5. Добавьте дополнительную навигацию ползунка

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

Следующий класс кнопки слайда соответствует «следующему» параметру, который мы будем использовать для продвижения слайдов вручную.

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


6. Стиль слайдера

Давайте добавим CSS для создания списка слайдеров. Некоторые слайдеры, такие как Nivo Slider, имеют пользовательскую таблицу стилей, которую вы можете скачать и начать, но для этой демонстрации, добавим наш собственный CSS непосредственно в конец основного файла screen.css на сайте.


7. Инициализировать плагин:

На данный момент у нас есть jQuery и импортированный плагин, но ничего не сообщают плагину, какой элемент на странице - это наш слайдер или какие опции включать - его нужно инициализировать.

Создайте файл setup.js и поместите его в каталог / js /.

Импортируйте его под скриптами jQuery и Cycle, которые вы импортировали в

области сайта ранее в учебнике.

Важно, что вы импортируете jQuery, jQuery Cycle, а затем setup.js в том точном порядке или плагин не будет работать.

Внутри setup.js добавьте следующий код:

Позволяет мне объяснить, что происходит в коде выше.

Мы начнем с проверки того, готов ли документ к документу. В противном случае плагин может попытаться изменить элементы на странице, которые недоступны или готовы.

Следующая строка сообщает плану Cycle, какой элемент мы используем в качестве контейнера элементов, которые мы хотим прокрутить. В нашем случае контейнер имеет идентификатор промо, поэтому мы вводим #promo.

Элементы, перечисленные в разделе fx to pause, являются параметрами, которые мы передаем в плагин. Если мы не будем включать и просто использовать: $ ('# promo'). Cycle (); плагин будет использовать свои настройки по умолчанию. Параметры перечислены в списке, разделенном запятыми. Количество и тип параметров зависят от каждого плагина, но для цикла jQuery можно найти по адресу http://jquery.malsup.com/cycle/options.html

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

Загрузите до и после сайтов, чтобы следовать.


Подумайте, вне контейнера

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

Спасибо за прочтение!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.