29.04.2020, 22:39
|
Новичок на форуме
|
|
Регистрация: 29.04.2020
Сообщений: 6
|
|
Rise,
Большое спасибо вам!
|
|
22.12.2020, 17:23
|
Новичок на форуме
|
|
Регистрация: 22.12.2020
Сообщений: 4
|
|
Тоже мучаюсь с данной проблемой.
<div class="swiper-container swiperExp">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiperOneMain">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
<div class="swiper-slide"><img src="[*image*]" alt="[*pagetitle*]"></div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const slider = document.querySelector('.swiperOneMain');
const sliderNav = document.querySelector('.swiperExp');
let mySwiperNav = new Swiper(sliderNav, {
slidesPerView: 5,
spaceBetween: 10,
loopedSlides: 5,
freeMode: true,
loop: true,
direction: 'vertical',
});
let mySwiper = new Swiper(slider, {
spaceBetween: 10,
loopedSlides: 5,
loop: true,
navigation: {
nextEl: 'swiper-button-next',
prevEl: 'swiper-button-prev',
},
thumbs: {
swiper: mySwiperNav,
}
});
var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
for (var i = 0; i < thumbs.length; i++) thumbs[i].addEventListener('mouseover', function() { this.click() });
</script>
Не понимаю почему не работает(
help)
Последний раз редактировалось makdim, 22.12.2020 в 18:41.
|
|
22.12.2020, 18:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
makdim,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
22.12.2020, 18:43
|
Новичок на форуме
|
|
Регистрация: 22.12.2020
Сообщений: 4
|
|
Сообщение от рони
|
makdim,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
Да спасибо так гораздо лучше!)
извиняюсь первый раз тут)
|
|
22.12.2020, 19:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
Сообщение от makdim
|
Не понимаю почему не работает(
|
что не работает?
Сообщение от makdim
|
Да спасибо так гораздо лучше!)
|
здесь лучше макет целиком а не блоками
Сообщение от makdim
|
nextEl: 'swiper-button-next',
20
prevEl: 'swiper-button-prev',
|
css селекторы не корректные, нужна точка в начале класса.
|
|
22.12.2020, 19:40
|
Новичок на форуме
|
|
Регистрация: 22.12.2020
Сообщений: 4
|
|
Сейчас смена слайдов происходит при клике на превью. А хотелось бы переделать, что бы смена была при наведении на превью. Пробовал способы из данной темы, не получилось(
Если есть идеи как это сделать, был бы очень признателен!
спасибо!
Ниже накидал тестовый макет
ps селекторы поправил. спасибо!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>
<body>
<div class="containerFlex">
<div class="swiper-container swiperExp">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiperOneMain">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://img.5element.by/upload/rk/121/121c5845d88f32b9dd3b439f81e286d3.jpg" alt=""></div>
</div>
</div>
</div>
<style>
.containerFlex {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1024px;
min-width: 0;
max-height: 500px;
}
.swiperExp {
min-width: 0;
}
.swiperOneMain {
min-width: 0;
}
.swiperExp img {
width: 100%;
height: 100%;
object-fit: cover;
}
.swiperOneMain img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const slider = document.querySelector('.swiperOneMain');
const sliderNav = document.querySelector('.swiperExp');
let mySwiperNav = new Swiper(sliderNav, {
slidesPerView: 5,
spaceBetween: 10,
loopedSlides: 5,
freeMode: true,
loop: true,
direction: 'vertical',
});
let mySwiper = new Swiper(slider, {
spaceBetween: 10,
loopedSlides: 5,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: mySwiperNav,
}
});
sliderNav.slides.on('mouseenter', function() {
slider.slideTo(Swiper.$(this).index())
});
</script>
</body>
</html>
|
|
22.12.2020, 19:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
makdim,
строку 95 заменить на
var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
thumbs.forEach(el => el.addEventListener('mouseenter', function() {mySwiper.slideTo(el.dataset.swiperSlideIndex) }));
|
|
22.12.2020, 20:00
|
Новичок на форуме
|
|
Регистрация: 22.12.2020
Сообщений: 4
|
|
Сообщение от рони
|
makdim,
строку 95 заменить на
var thumbs = document.querySelectorAll('.swiperExp .swiper-slide');
thumbs.forEach(el => el.addEventListener('mouseenter', function() {mySwiper.slideTo(el.dataset.swiperSlideIndex) }));
|
всё работает!
спасибо огромное!
|
|
|
|