Как сделать карусель (слайдер) изображений или фото на вашем сайте на WordPress



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

Как сделать слайдер с помощью плагина для WordPress?

Сегодня расскажу об очень крутом плагине для WordPress, с помощью которого я смог быстро и без особых усилий организовать красивую карусель на одном из своих сайтов. А вдохновила меня на это статья на одном из сайтов, где и подметил эту самую карусель.
Очень просто способ даже для новичка слайдер с помощью крутейшего плагина для WordPress — Meta Slider.

Как создавать слайдеры из картинок с плагином Meta Slider?

Для начала устанавливаем слайдер. Стандартно идём в раздел Плагины и выбираем — « Добавить новый», далее вбиваем в строку поиска наше название, находим его и устанавливаем.

добавляем плагин Meta Slider через админку WordPress

Обязательно нужно активировать плагин.

активируем плагин Meta Slider через админку WordPress

Далее у нас появится в левом меню внизу раздел Meta Slider, заходим туда и создаем новый слайдер.

создаем новый слайдер из картинок с помощью плагина Meta Slider через админку WordPress

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

Загружаем картинки и даем им описание с помощью плагина Meta Slider через админку WordPress

Шаг2. Выбираем так называемый «стиль» у нашего слайдера.

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

Дизайн слайдера Flex Slider

Plugin-Meta-Slider-Flex-Slider

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

Изменение настроек слайдера в Plugin Meta Slider Flex

В этой версии нельзя задать параметры дизайна, а стиль переключения между слайдами доступно в Flex Slider только два эффекта: растворение и скольжение. Мне больше нравится эффект «растворение».

Дизайн слайдера R. Slider

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

пример отображения слайдера созданного в Meta Slider в стиле R.Slider

Дизайн слайдера Nivo Slider

Nivo Slider — здесь стрелочки более стильные и навигация — с другим дизайном точек. Здесь доступно достаточно много эффектов переключения слайдов: жалюзи, мозайка, сдвиг вправо, а так же дизайны, есть с чем поиграться.

пример отображения слайдера созданного в Meta Slider в стиле Nivo Slider

 

Дизайн слайдера Coin Slider

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

пример отображения слайдера созданного в Meta Slider в стиле Coin Slider

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

Вставляется слайдер в статью очень просто, внизу есть специальное поле:

как вставить слайдер с помощью плагина Meta Slider

И действуем как там написано: копируем шорткод и вставляем в запись сайта!
Всё очень и очень просто. Смотрим на слайдер, который в итоге получился!

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



Обратите внимание на следующие статьи...

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

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