WordPress-блог

Терпенье и труд...

Красивый слайдер для WordPress с 3D эффектом

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

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

Симпатичный слайдер для WordPress с 3D эффектом

Похожие плагины:

Плагин Stack Slider 3d Image Slider

Итак, для реализации слайдера с 3D эффектом нам потребуется плагин Stack Slider 3d Image Slider, который завоевал моё внимание красивым дизайном, а также тем, что он совершенно бесплатный. Недостаток всего один – как всегда, англоязычный интерфейс. Но я вам помогу освоиться.

Для начала скачайте плагин ниже, установите и активируйте.

Давайте попробуем создать слайдер для WordPress с 3D эффектом. Для этого попадите в пункт «Stack slider» и откройте подпункт «Add Stack slider». Вы окажетесь в редакторе слайдера. Здесь в первую очередь запишите название слайдера. Его не будет видно нигде на сайте, но благодаря названию вы сможете отличать слайдеры друг от друга, если их будет несколько. Из можно создать бесконечное количество.

Введите название слайдера

Затем нужно добавить изображения в новый слайдер. Для этого нажмите кнопку Gallery Images. Появится медиабиблиотека WordPress, где вы сможете выбрать картинки для слайдера, либо загрузить новые.

Добавьте изображения в слайдер

После добавления картинок, можно настроить этот слайдер для WordPress с 3D эффектом. Для этого ниже есть опции, которые разделены на несколько секций.

Первая секция опций «Choose your Settings for Carousel»:

  • Slide To Show. Количество одновременно видимых слайдов.
  • Slide To Scroll. Количество слайдов прокрутки, то есть то, на сколько слайдов будет происходит прокрутка при клике в ту или иную сторону.
  • Centermode. Если установить эту опцию на позицию «True», то активный слайдер будет всегда центрироваться.
  • Space Between Slides. Указывается расстояние между слайдами в пикселях.

Настройки Choose your Settings for Carousel

Вторая секция с настройками плагина называется «Navigation & Pagination Settings»:

  • Arrow. Показывать или нет стрелки. Чтобы показывать, нужно установить переключатель на позицию «True».
  • Pagination. Показывать или нет пагинацию. Чтобы показывать, нужно установить переключатель на позицию «True».
  • Pagination Type. Можно выбрать тип пагинации из двух вариантов.

Настройки Navigation & Pagination Settings

Затем идут настройки «3D Effect Settings», которые определяют визуальный и анимационный эффект:

  • Depth. Определяет глубину левого и правого слайда.
  • Image overlap position. Определяет эффект перекрытия изображения.

Настройки 3D Effect Settings

И последняя секция настроек «Genaral Settings» с основными опциями:

  • Autoplay. Слайдер для WordPress с 3D эффектом может переключаться автоматически. Для этого здесь нужно поставить «True».
  • Autoplay Speed. Указывается задержка между переходами.
  • Speed. Продолжительность перехода между слайдами.
  • Loop. Включает непрерывное проигрывание слайдера. Для включения нужно установить в положение «True».
  • Autoplay Stop On Last. Включите эту опцию, что бы автовоспроизведение остановилось, когда все слайды будут показаны.

Настройки Genaral Settings

После произведения необходимых настроек можно сохранить слайдер. Для этого нажмите кнопку «Опубликовать».

Публикация слайдера

Теперь можно опубликовать на сайте слайдер для WordPress с 3D эффектом. Перейдите в пункт  «Stack slider». Там вы увидите созданные слайдеры. Вам необходим шорткод в графе «Shorcode». Опубликовав его в записи или странице, вы сможете вывести слайдер.

Шорткод слайдера

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

Слайдер Stack Slider 3d Image Slider

Если вам необходимо вывести слайдер не на странице или записи, а опубликовать его где-то в файле темы, то можно использовать PHP-код:

В этом коде XX – это идентификатор выводимого слайдера (цифры после id в шорткоде).

УжасноПлохоНормальноХорошоОтлично (2 оценок, среднее: 5,00 из 5)
  1. Вот если бы хоть примерные значения указаны были в инструкции для настроек. А то все окна пустые на картинках, из чего исходить? Глубина, ширина… ((

    1. Константин Вендин

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

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

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

 

WordPress-блог © 2015-2017