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

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

Видеоверсия:
[iframe id="https://www.youtube.com/embed/MWSkQIFrSNA?rel=0&vq=hd720" align="center" mode="normal" autoplay="no" maxwidth="1280"]


Создаем слайдер самым простым способом.

Для создания и размещения слайдера на сайте зачастую необходимо обладать знаниями HTML, CSS, JAVASCRIPT/JQUERY. Но что делать тем, кто пока не обладает достаточными знаниями для создания слайдера? Как вариант, можно нанять фрилансера для выполнения данной задачи. Или приступить все-таки к изучению вышеназванных технологий. Но что делать если слайдер Вам нужен срочно и нет времени ждать пока получится создать самому более или менее подходящий вариант?

В данной статье мы решаем данную проблему и создаем слайдер без знания языков программирования. А в этом нам поможет специальный сервис, который находится по адресу www.photosnack.com. Кстати, слайдер вначале статьи создан с помощью него. Сразу хочу заметить, что сервис сам по себе бесплатный, однако существует и платная версия данного продукта. Ее преимущество заключается в возможности убрать логотип данного сервиса с вашего слайдера. Поэтому, если не принципиально, Вы можете пользоваться бесплатной версией этого продукта. Либо приобрести платный вариант за 8 долларов в месяц. Используя эту возможность мы размещаем слайдер на сайте при помощи встраивания внешнего объекта тегом <iframe>.

После перехода на сайт данного сервиса, мы кликаем по кнопке "MAKE A SLIDESHOW".

сервис PhotoSnack
Загрузка фото для слайдера

Далее перед нами всплывает окно, где мы должны указать загружаемые файлы и нажать "Открыть". После загрузки файлов мы кликаем на кнопку "Next". Следующим шагом, нам предлагают ввести наши учетные данные или зарегистрироваться. Мы выбираем второй вариант кликнув "Sign Up". В лучших традициях продвинутых сервисов, у нас есть 2 варианта регистрации. Первое - это через аккаунт социальной сети (Facebook, Google, Twitter). Второе - через адрес электронной почты. На устраивает 2-ой вариант. В окошке слева мы указываем адрес электронной почты, имя, никнейм и пароль. Далее кликаем "Register".

Регистрация в сервисе PhotoSnack
Регистрация в сервисе PhotoSnack

После этого появляется поздравительное сообщение об успешной регистрации. Также, в ней говорится о необходимости активации аккаунта через высланное письмо на указанный электронный адрес в течение суток. Далее мы кликаем "Continue". После этого у нас есть возможность сразу же разместить слайдер на свой сайт кликнув по кнопке "Embed". Но сначала мы отредактируем наш слайдер. Для этого мы переходим по ссылке "Edit".

Опубликовать или редактировать?
Опубликовать или редактировать?

Теперь мы можем добавить еще изображения в наш слайд. Но нам это не нужно поэтому мы кликаем по кнопке "Next". Далее, мы можем выбрать шаблон внешнего вида слайдера. Мне больше пришелся по душе под названием "Image Slider".

Шаблоны слайдеров
Шаблоны слайдеров на любой вкус

В блоке "Settings" мы можем настроить размер, функциональность, звуковое сопровождение и внешний вид слайдера. Функция слайдшоу включена по умолчанию с интервалом в 6 секунд. Данные значения Вы можете изменить по своему усмотрению. Также, я убираю галочки с чекбоксов "Show image info" (показ информации фото), "Show title and description" (показ названия и описания фото), "Show navigation buttons" (показ кнопок навигации), "Show share buttons" (показ кнопок соц. сетей). Еще в настройках "Background" мы можем настроить либо отключить ("transparent") фон слайдера.

Настройки слайдера
Настройки слайдера

И наконец, мы кликаем по кнопке "Finish". Теперь нам остается разместить слайдер на нашем сайте. Для этого мы кликаем по уже упомянутой кнопке "Embed". После этого в появляющемся окне мы кликаем по "Use free" (так как мы используем бесплатную версию). Далее, копируем сгенерированный код и вставляем в том месте html документа, где хотим разместить слайдер. Я это делаю до заголовка первого уровня.

Код для вставки на веб-страницу
Код для вставки на веб-страницу

После этого нам остается сохранить прогресс при помощи сочетаний клавиш CTRL+S и проверить результат.

Слайдер на веб-странице
Слайдер на нашей веб-странице

Отлично! Слайдер появился на нашей веб-странице. Он выглядит достаточно эффектно. Итак, как видите сервис photosnack обладает достаточно широким инструментарием и позволяет создать такой слайдер, который нужен именно Вам. А самое главное - для его создания вовсе не нужно знать языки программирования. А на этом у меня все. Надеюсь данный урок оказался для вас полезным. Если это так:

  1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
  2. [popup_trigger id="3874" tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с Вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

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

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

Вы можете использовать следующие теги HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

5 + семь =

Закрыть