Как сделать слайдер с увеличением по клику на WordPress

author

Владислав Синица

date

25 декабря, 2019

views

Просмотрело: 68

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

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

Использовать мы будем два плагина: Slide Anything и Easy FancyBox. Их нужно установить и активировать. Вместо Slide Anything можете использовать другой слайдер, но я покажу на примере него. Так как это самый простой слайдер в настройке.

Slide Anything – настройка

После активации плагина в боковой панели вы увидите дополнительную строку с названием SA Sliders. Создаете новый слайдер нажав на кнопку Add New Slider.

Создание нового слайдера

Вы попадаете в панель создания слайдов, не пугайтесь того, что много настроек, это так кажется на первый взгляд 🙂
Задайте имя слайдеру, у меня будет auto, т.к. слайдер будет с автомобилями.

Настройка слайдера SA Sliders

Теперь переходим к созданию самих слайдов. Вы просто переключаетесь по вкладкам SLIDE1, SLIDE2, SLIDE3 и задаете содержимое слайда. У меня содержимым будет просто картинка. Теперь обратите внимание на вкладку Slide Link. Тут необходимо задать ссылку на картинку.

Добавление и настройка слайдов

Где взять эту ссылку на картинку? Когда вы добавляете файл через библиотеку, то при выделении файла есть пункт Копировать ссылку. Содержимое этого пункта необходимо скопировать и вставить в раздел Slide Link.

Должно быть примерно так:

Добавление ссылки для картинки слайдера

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

Пример настройки SA Slider

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

Пример работы слайдера с увеличением картинок

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

Вам также может понравиться

Автор: Владислав Синица

Дата публикации:

Категория: WordPress

На чтение: 3 мин

Подписаться
Уведомить о
guest
3 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Александр
Александр
7 месяцев назад

Спасибо, искал плагин бесплатный с lightbox, нашёл эту статью)

Для тех кого смущает маленькая иконка на которую нужно клацнуть для увеличение, написал скрипт.
Кликая на любую область в картинке, будет открываться увеличенная картинка.

const postSlider = document.getElementById('post_slider');  
// ID слайдера, задавайте в настройках ID слайдера с таким названием, 
или ставьте свой, но ниже заманите "post_slider" - на свой.

if( postSlider ) {
  let items = postSlider.querySelectorAll('.owl-item');
  items.forEach((item) => {
    item.addEventListener('click', () => {
      let link = item.querySelector('.sa_slide_link_icon');
      link.click();
    });
  });
}
});
Александр
Александр
7 месяцев назад
Ответить на  Александр

И для самой иконки задать opacity: 0; так как она будет неактуальной

marybars
marybars
4 месяцев назад

Отличное решение для чайников!