Существует большое количество различных скриптов, которые реализуют функционал слайдера и галереи изображений.
На вкус и цвет товарищей нет, но данный скрипт по праву является одним из самых популярных в данной категории. Подключается он с помощью двух строк, добавленных в код страницы сайта:
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" integrity="sha256-P8k8w/LewmGk29Zwz89HahX3Wda5Bm8wu2XkCC0DL9s=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script> |
Перед подключением скрипта фэнсибокс у вас уже должен быть подключен jquery.
Если критична скорость работы сайта, то скачайте сжатые исходники с cdnjs.com/libraries/fancybox и подключайте их локально. В таком случае подключение будет быстрее, так как странице не надо качать исходники с удаленного сервера.
Чтобы галерея начала работать достаточно указать
|
1 2 3 |
<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1"> <img src="thumbnail_1.jpg" alt="" /> </a> |
При этом в обертке со ссылкой будет большое изображение, которое будет увеличиваться по клику. А в теге img будет миниатюра.