Сегодня я расскажу как реализовать слайдер, в котором можно будет открывать картинки в модальном окне.
Зачастую такую опцию дает разработчик слайдера в Pro версиях своего продукта, я же предлагаю вам сделать такое самим.
Использовать мы будем два плагина: Slide Anything и Easy FancyBox. Их нужно установить и активировать. Вместо Slide Anything можете использовать другой слайдер, но я покажу на примере него. Так как это самый простой слайдер в настройке.
Slide Anything – настройка
После активации плагина в боковой панели вы увидите дополнительную строку с названием SA Sliders. Создаете новый слайдер нажав на кнопку Add New Slider.
Вы попадаете в панель создания слайдов, не пугайтесь того, что много настроек, это так кажется на первый взгляд 🙂
Задайте имя слайдеру, у меня будет auto, т.к. слайдер будет с автомобилями.
Теперь переходим к созданию самих слайдов. Вы просто переключаетесь по вкладкам SLIDE1, SLIDE2, SLIDE3 и задаете содержимое слайда. У меня содержимым будет просто картинка. Теперь обратите внимание на вкладку Slide Link. Тут необходимо задать ссылку на картинку.
Где взять эту ссылку на картинку? Когда вы добавляете файл через библиотеку, то при выделении файла есть пункт Копировать ссылку. Содержимое этого пункта необходимо скопировать и вставить в раздел Slide Link.
Должно быть примерно так:
Вот такие действия надо проделать для каждого слайда.
После этого задайте настройки количества вывода слайдов для каждого устройства и обновите слайдер. У меня это выглядит так:
Теперь вы можете посмотреть результат как это получилось у меня.
Вы можете видеть, что картинки в слайдере разного размера. В следующей статье я расскажу вам как сделать один размер для всех картинок.
Спасибо, искал плагин бесплатный с 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(); }); }); } });И для самой иконки задать opacity: 0; так как она будет неактуальной
Отличное решение для чайников!