Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.04.2020, 14:08
Новичок на форуме
Отправить личное сообщение для Mazaxaka_6630 Посмотреть профиль Найти все сообщения от Mazaxaka_6630
 
Регистрация: 29.04.2020
Сообщений: 6

swiper-slider переключение слайдов при наведении на превью
Добрый день всем! Ребята. На сайте в 1С-Битрикс интегрирован слайдер:
Слайдер находится вот тут:
https://test.oknapanorama.by/test/

Swiper-slider взят от сюда:
https://swiperjs.com/api/
Нужно его доработать так, чтобы слайды переключались при наведении на превьюшку слайда. Никак не получается это реализовать.
Менять слайдер на другой достаточно затратно выходит..
Подскажите пожалуйста в какую сторону копать..
Ответить с цитированием
  #2 (permalink)  
Старый 29.04.2020, 14:31
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от Mazaxaka_6630
чтобы слайды переключались при наведении на превьюшку слайда.
На тач-девайсах нечему наводится, там нет курсора, сразу тыкаешь в нужное место.
Ответить с цитированием
  #3 (permalink)  
Старый 29.04.2020, 14:33
Новичок на форуме
Отправить личное сообщение для Mazaxaka_6630 Посмотреть профиль Найти все сообщения от Mazaxaka_6630
 
Регистрация: 29.04.2020
Сообщений: 6

Да, это понятно.
Но, есть трафик на сайт и с десктопов. И начальство хочет имменно на десктопе видеть такой эффект
Можно как-то решить?

Последний раз редактировалось Mazaxaka_6630, 29.04.2020 в 14:37.
Ответить с цитированием
  #4 (permalink)  
Старый 29.04.2020, 15:11
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

var thumbs = document.querySelectorAll('.gallery-thumbs .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });
Ответить с цитированием
  #5 (permalink)  
Старый 29.04.2020, 15:19
Новичок на форуме
Отправить личное сообщение для Mazaxaka_6630 Посмотреть профиль Найти все сообщения от Mazaxaka_6630
 
Регистрация: 29.04.2020
Сообщений: 6

Rise,
Сообщение от Rise Посмотреть сообщение
var thumbs = document.querySelectorAll('.gallery-thumbs .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });
Спасибо, что помогаете, вставил данный код чуть ниже вызова слайдера.
Не хочет отрабатывать.
Может быть конфликтует с событиями самого слайдера?
Я так понимаю не отрабатываем именно click

Последний раз редактировалось Mazaxaka_6630, 29.04.2020 в 16:06.
Ответить с цитированием
  #6 (permalink)  
Старый 29.04.2020, 16:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Mazaxaka_6630,
может там не клик а mousedown или иначе.
Ответить с цитированием
  #7 (permalink)  
Старый 29.04.2020, 16:27
Новичок на форуме
Отправить личное сообщение для Mazaxaka_6630 Посмотреть профиль Найти все сообщения от Mazaxaka_6630
 
Регистрация: 29.04.2020
Сообщений: 6

рони,
Вот и не могу понять, как имитировать клик при наведении на превьюшку..
Ответить с цитированием
  #8 (permalink)  
Старый 29.04.2020, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Mazaxaka_6630,
вставить после инициализации слайдера
$(function() {
$(".swiper-slide").mouseenter(function() {
var down = new MouseEvent("mousedown", {bubbles: true, cancelable: false});
var up = new MouseEvent("mouseup", {bubbles: true, cancelable: false});
  this.dispatchEvent(down);
  this.dispatchEvent(up);
})
});
Ответить с цитированием
  #9 (permalink)  
Старый 29.04.2020, 17:52
Новичок на форуме
Отправить личное сообщение для Mazaxaka_6630 Посмотреть профиль Найти все сообщения от Mazaxaka_6630
 
Регистрация: 29.04.2020
Сообщений: 6

Сообщение от Rise Посмотреть сообщение
var thumbs = document.querySelectorAll('.gallery-thumbs .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });
Огромное спасибо! Работает)
Ответить с цитированием
  #10 (permalink)  
Старый 29.04.2020, 18:43
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Mazaxaka_6630, но работает вариант рони, вот мой рабочий:
galleryThumbs.slides.on('mouseenter', function() { galleryTop.slideTo(Swiper.$(this).index()) });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление лупы при наведении на картинку Dash jQuery 9 08.08.2017 21:27
Блокировка скролла всей страницы при наведении на элемент TimofeyEid jQuery 2 06.09.2015 14:30
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Менять цвет фона select option при наведении Dmitriykh Элементы интерфейса 3 25.07.2011 13:04
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48