С помощью Swiper можно сделать.
Большой блок слева слайдера можно сделать отдельным от самого слайдера блоком и с помощью событий подменять в нем контент по мере прокрутки.
В мобильной версии местоположение элементов и сами элементы различаются. Используйте медиазапросы, чтобы на каждом нужном разрешении расположить их на нужном месте.
Rsa97, запрос использую без PDO, а используя $wpdb из вордпресса.
Код запроса такой получается
$works = $wpdb->get_results("SELECT * FROM `$table_name` WHERE (work_start_date <= '$date_start' AND work_end_date >= '$date_end')
Но выше написал, что такое условие не подходит, не выберутся объекты, у которых дата работ между датами фильтра
Видимо, я неправильно использовал двоеточие и оно тут не нужно.
Но тогда по такому запросу при фильтре 2021-09-15 - 2021-09-20 не выведется объект с датой работы, например 2021-09-17 - 2021-09-18
Даты хранятся в формате Y-m-d, получается вот такой запрос
SELECT * FROM `table` WHERE (work_start_date <= :'2021-09-08' AND work_end_date >= :'2021-09-18')
Но при его выполнении получается ошибка:
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ':'2021-09-08' AND work_end_date >= :'2021-09-18')
Сергей Нестеровский, задавайте ховер эффект внутри медиа запроса @media screen and (min-width: 780px) {}
Тогда он будет срабатывать на устройствах с шириной экрана 780px и выше.
Islam Ibakaev, в механизме работы не силен, точно объяснить не могу. Методом тыка обнаружил и подсказал.
Скорее всего из-за того, что при высоте 100% высота body равна высоте устройства. И при добавлении overflow: hidden (это делает slideout.js) к body получается, что body обрезается и показывается верх страницы.