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(){

    });
     
});

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(){

    });

});

рони,
спасибо вам за отклик сейчас объясню суть, есть два слидера с одинаковом количеством контента (в первом 10 и втором 10), они в сайте стоят горизонтально друг за другом (то-исть в верху слаид1 и у него 10 изображения или просто текст но они скрытии {display: none} и 20px в низу стоит второй слаидер который видно ) теперь хочу сделать так чтобы при наведение на элемент второго слайдера показалось элемент из первого слайдера по индексу например мы наводим мыш на 3-ого элемента из второго слаидера в первом слайдере 3и элемент стало {
display: block}

обо слайдери
https://pastenow.ru/63a6081c43f39afbe8c0e4df23806947
второй
https://pastenow.ru/bab9353a2a9f4b6629e8895c3c41a8be

рони,
Сработал мой метод но теперь другое вопрос а как сделать на оборот когда мыш убираем из элемента

$.each(prod, function(index, val) {
    $(val).hover(function(){
        $.each($(tumb[index]).find('div, img'), function(i, v) {
             $(v).css('display','block'); 
        });
    },function(){

    });
});

рони,
и это сделал но пожалуйста посмотри код не слишком много 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');
        });
    });
});

Hovik,
не могу помочь, не осилил ваших описаний, но можно так.

$.each(prod, function(index, val) {
    var tmp = $('div, img', tumb[index]);
    $(val).hover(function() {
        tmp.stop().show('400');
    }, function() {
        tmp.stop().hide('400')
    })
});

Спасибо тебе рони,