25.09.2020, 17:47
|
|
Кандидат Javascript-наук
|
|
Регистрация: 15.10.2018
Сообщений: 116
|
|
|
swiper slider эффекты при наведение
Привет всем я пытаюсь настроит swiper slider в сайте, но что то не получается. слайдер с миниатюре (точнее это скрытии блоки который должно появляется при наведение элемента слайда ).Заранее благодарю за помаши.
.thumb-slider .swiper-slide{
display: none;
}
<section class="slider2 ">
<div class="border"></div>
<div class="thumb-slider container hidden">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
<div class="swiper-slide">
<div class="thumb-border"></div>
<div class="thumb-bg"></div>
<img src="/wp-content/uploads/2020/09/slide-icon.png" alt="">
</div>
</div>
</div>
<div class="product-slider container">
<div class="swiper-wrapper">
<div class="swiper-slide">item 1
<div class="product-bg"></div>
</div>
<div class="swiper-slide">item 2
<div class="product-bg"></div>
</div>
<div class="swiper-slide">item 3
<div class="product-bg"></div>
</div>
<div class="swiper-slide">item 4
<div class="product-bg"></div>
</div>
<div class="swiper-slide">item 5
<div class="product-bg"></div>
</div>
<div class="swiper-slide">item 6
<div class="product-bg"></div>
</div>
<div class="swiper-slide">item 7
<div class="product-bg"></div>
</div>
<div class="swiper-slide">item 8
<div class="product-bg"></div>
</div>
</div>
<div class="prod-button-next"></div>
<div class="prod-button-prev"></div>
</div>
</section>
var swiper2 = new Swiper('.product-slider', {
loop: true,
slidesPerView: 7,
navigation: {
nextEl: '.prod-button-next',
prevEl: '.prod-button-prev',
},
thumbs: {
swiper: thumb,
},
});
var thumb = new Swiper('.thumb-slider', {
loop: true,
slidesPerView: 7,
navigation: {
nextEl: '.prod-button-next',
prevEl: '.prod-button-prev',
},
});
let prod = $('.product-slider .swiper-wrapper .swiper-slide');
let tumb = $('.thumb-slider .swiper-wrapper .swiper-slide');
$.each(prod, function(index, val) {
$(val).hover(function(){
$(tumb[index]).css('display','block');
console.log(tumb[index], index )
},function(){
});
});
|
|
25.09.2020, 18:23
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,136
|
|
Hovik,
не особо понятно что вы хотите сделать, но на всякий случай
$.each(prod, function(index, val) {
let i = val.dataset.swiperSlideIndex;
$(val).hover(function(){
let tmb = tumb.filter((k, el) => el.dataset.swiperSlideIndex == i);
tmb.css('display','block');
},function(){
});
});
|
|
25.09.2020, 21:26
|
|
Кандидат Javascript-наук
|
|
Регистрация: 15.10.2018
Сообщений: 116
|
|
|
рони,
спасибо вам за отклик сейчас объясню суть, есть два слидера с одинаковом количеством контента (в первом 10 и втором 10), они в сайте стоят горизонтально друг за другом (то-исть в верху слаид1 и у него 10 изображения или просто текст но они скрытии {display: none} и 20px в низу стоит второй слаидер который видно ) теперь хочу сделать так чтобы при наведение на элемент второго слайдера показалось элемент из первого слайдера по индексу например мы наводим мыш на 3-ого элемента из второго слаидера в первом слайдере 3и элемент стало {
display: block}
|
|
25.09.2020, 21:34
|
|
Кандидат Javascript-наук
|
|
Регистрация: 15.10.2018
Сообщений: 116
|
|
|
|
|
25.09.2020, 22:04
|
|
Кандидат Javascript-наук
|
|
Регистрация: 15.10.2018
Сообщений: 116
|
|
рони,
Сработал мой метод но теперь другое вопрос а как сделать на оборот когда мыш убираем из элемента
$.each(prod, function(index, val) {
$(val).hover(function(){
$.each($(tumb[index]).find('div, img'), function(i, v) {
$(v).css('display','block');
});
},function(){
});
});
|
|
25.09.2020, 22:09
|
|
Кандидат Javascript-наук
|
|
Регистрация: 15.10.2018
Сообщений: 116
|
|
рони,
и это сделал но пожалуйста посмотри код не слишком много eacha там, можно ? как то оптимизировать ?
$.each(prod, function(index, val) {
$(val).hover(function(){
$.each($(tumb[index]).find('div, img'), function(i, v) {
// $(v).css('display','block');
$(v).toggle('400');
});
},function(){
$.each($(tumb[index]).find('div, img'), function(i, v) {
// $(v).css('display','block');
$(v).toggle('400');
});
});
});
|
|
25.09.2020, 22:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,136
|
|
Hovik,
не могу помочь, не осилил ваших описаний, но можно так.
$.each(prod, function(index, val) {
var tmp = $('div, img', tumb[index]);
$(val).hover(function() {
tmp.stop().show('400');
}, function() {
tmp.stop().hide('400')
})
});
|
|
25.09.2020, 23:46
|
|
Кандидат Javascript-наук
|
|
Регистрация: 15.10.2018
Сообщений: 116
|
|
|
Спасибо тебе рони,
|
|
|
|
