swiper hover 정지기능 질문 채택완료
코딩어려웡
3년 전
조회 2,438
</p>
<p> var swiper = new Swiper(".mySwiper2", {
slidesPerView: 4,
spaceBetween: 20,
loop : true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
/*마우스오버 정지*/
$('.swiper-slide > a').hover(function(){
swiper.autoplay.stop();
}, function(){
swiper.autoplay.start();
});
</p>
<p> var swiper = new Swiper(".mySwiper1", {
centeredSlides: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
effect : 'fade',
loop : true,
speed:3000,
fadeEffect: {
crossFade: true
},
});
$('.ul-test .li-test').hover(function(){
var index = $(this).index();
swiper.slideTo(index + 1, 3000);
})
/*마우스오버 정지*/
$('.swiper-slide, .li-test').hover(function(){
swiper.autoplay.stop();
}, function(){
swiper.autoplay.start();
}); </p>
<p>
각각 페이지에서는 정상 작동되는데 한페이지 안에서는 마우스오버가 마지막에 오는거만 적용되네요
따로 각각 마우스오버 정지 기능이 불가능 할까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
3년 전
가능합니다.
문제는 mySwiper1과 mySwiper2를 swiper라는 변수에 리턴값을 담고 있는데요. 그러면 코드 상 mySwiper1만 동작을 할것으로 보입니다.
그럼
1. 마우스 오버시 슬라이더를 구분 지을 수 있는 방법이 필요
2. var swiper가 아니라 swiper1, swiper2 각각에 담거나, 배열에 담거나 하여 별도로 구분할것
그러니깐 hover 이벤트 연결되어있는데 저 hover시 어떤 슬라이더를 선택했는지 알 수 있어야 하고,
그 슬라이더를 멈췄다가 start를 시켜야 한다는 것입니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
코딩어려웡
3년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
데충 이해는 하고 있었는데 콕 찝어서 말씀해 주시니 바로 찾아지네요