Идеи по переключении слайдера при клике на одну из сторон?

Question

[Evtera]

Здравствуйте. Есть обычный слайдер swiper. Нужно сделать так, чтобы при клике на правую сторону слайдер переключался вправо. При клике влево соответственно влево.

Вариант с невидимыми стрелками не подходит, так как внутри слайдов есть кнопки-ссылки. Они должны быть кликабельными, а стрелки перекрывают их своим z-index

Comments

[Антон Литвиненко]

Вообще это так и делали всегда. Посмотрите слайдер в третьем бутстрапе, вроде там такое было

Answer 1

[Evtera]

const qwe = () => {
const $container = document.querySelector(".swiper-container");
const container_width = $container.offsetWidth;
const container_side_width = container_width / 2;
const window_width = window.innerWidth;
const emptySpace = (window_width - container_width) / 2;

$container.addEventListener("click", (event) => {
if (event.clientX <= emptySpace + container_side_width) {
swiper.slidePrev(600);
} else {
swiper.slideNext(600);
}
});
};

qwe();

Answer 2

[veryGoodTrip]

Самая здравая идея это сделать кнопки видимыми.
Теперь к нездоровым:
Можно получит координаты углов контейнера, затем координаты прямоугольников половинок контейнера.
При клике смотреть в какую половину попадает клик и переключать слайдер в нужном направлении.
В обработчике клика перед тем как проверять координаты нужно проверить что event.target на предмет того что это не "кнопки-ссылки", у кнопок ссылок в свою очередь должен быть железный признак, например специфический css класс.

Comments

[Evtera]

Клиент страдает маня-фантазиями, ему не объяснить, что кнопки можно сделать видимыми. На счет второго варианта я тоже думал. Однако, пока что не могу найти оптимальный способ получения координат и их расчета. Думал сделать как-нибудь через mouseover event, но к сожелению он не возвращает в event координаты точки, где был сделан клик. Имею в виду, координату не относительно всего экрана, а только обертки слайдера.

[Evtera]

в принципе, я почти реализовал второй способ, но может есть способы получше