var sliderThumbs = new Swiper('.slider .slider-thumbs', {
slidesPerView: 'auto',
});
var slidercontent = new Swiper('.slider .slider-content', {
disableOnInteraction: false,
thumbs: {
swiper: sliderThumbs,
},
});
slide change to thumbs hover
not working the following code
$('.swiper-slide.thumb-slide').hover(function() {
$( this ).trigger( "click" );
});
i do sorry for my bad english
var sliderThumbs = new Swiper('.slider .slider-thumbs', {
slidesPerView: 'auto',
});
var slidercontent = new Swiper('.slider .slider-content', {
disableOnInteraction: false,
thumbs: {
swiper: sliderThumbs,
},
});
slide change to thumbs hover
not working the following code
$('.swiper-slide.thumb-slide').hover(function() {
$( this ).trigger( "click" );
});
i do sorry for my bad english
Share Improve this question edited Jun 1, 2022 at 8:31 Ferhat asked Oct 4, 2019 at 11:24 FerhatFerhat 331 gold badge1 silver badge5 bronze badges2 Answers
Reset to default 4$( this ).trigger( "click" ) won't work because the thumbnail slides don't actually have click events bound to them. Instead, you can call the slideTo() method and use the thumbnail's index, like so:
$('.swiper-slide').on('mouseover', function() {
slidercontent.slideTo($(this).index());
})
See the following:
- Swiper API methods: https://swiperjs./api/#methods
- jQuery's
.index()method: https://api.jquery./index/
You can use below script btw, its made by only CSS. Also, pagination is triggered when you hover over the relevant area on the slider.
https://codepen.io/sawacrow/details/YzjXwzy
CSS
.swiper-pagination-hover-wrap {
.swiper-wrapper {
padding-bottom: 50px;
}
.swiper-pagination {
//background-color: rgba(204, 16, 184, 0.45);
z-index: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
bottom: 0;
&-bullet {
width: 100%;
border-radius: 0px;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background-color: transparent;
&::before {
position: absolute;
bottom: 0;
color: black;
background-color: #000000;
content: "";
width: 100%;
height: 10px;
}
&::after {
//background-color: rgba(255, 0, 0, 0.49);
content: "";
//border-left: 1px solid red;
width: fit-content;
height: 100%;
position: absolute;
left: 0;
width: 100%;
}
}
}
}
JS
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
document.querySelectorAll('.swiper-pagination-hover-wrap .swiper-pagination-bullet').forEach(el => el.addEventListener('mouseover', (event) => {
el.click();
}));
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper swiper-pagination-hover-wrap">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h1>slider1</h1>
</div>
<div class="swiper-slide">
<h1>slider2</h1>
</div>
<div class="swiper-slide">
<h1>slider3</h1>
</div>
<div class="swiper-slide">
<h1>slider4</h1>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</body>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744231115a4564254.html
评论列表（0条）