[Hovik]

Привет всем я пытаюсь настроит 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(){

    });
     
});