swiper hover 정지기능 질문
본문
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();
});
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();
});
각각 페이지에서는 정상 작동되는데 한페이지 안에서는 마우스오버가 마지막에 오는거만 적용되네요
따로 각각 마우스오버 정지 기능이 불가능 할까요?
답변 1
가능합니다.
문제는 mySwiper1과 mySwiper2를 swiper라는 변수에 리턴값을 담고 있는데요. 그러면 코드 상 mySwiper1만 동작을 할것으로 보입니다.
그럼
1. 마우스 오버시 슬라이더를 구분 지을 수 있는 방법이 필요
2. var swiper가 아니라 swiper1, swiper2 각각에 담거나, 배열에 담거나 하여 별도로 구분할것
그러니깐 hover 이벤트 연결되어있는데 저 hover시 어떤 슬라이더를 선택했는지 알 수 있어야 하고,
그 슬라이더를 멈췄다가 start를 시켜야 한다는 것입니다.
감사합니다 진짜 깔끔하게 해결됐습니다
데충 이해는 하고 있었는데 콕 찝어서 말씀해 주시니 바로 찾아지네요
답변을 작성하시기 전에 로그인 해주세요.
